Responsive CSS Div Width

Question

In CSS, I have defined 3 breakpoints 360px, 660px, 800px. There are multiple <div> tags on page with just text link in it. 1 <div> block having 1 <a> .

For 360px breakpoint, I am going with 100% width for each <div> . But for other 2 breakpoints I want to have normal width of <div> (normal width based on text length). How to achieve this for 660px and 800px breakpoints as these are getting to 100% width as well. I want these 2 to take natural width.

Answer 1

just change all div's display "block" and "inline-block" with breakpoints

like this:-

 @media only screen and (max-width: 360px) {
  .example{
     display:block;
  }
 }


 @media only screen and (min-width: 660px) {
  .example{
    display: inline-block;
  }
 }

Answer 2

It depends how you want it to behave, what is your layout goal. If all you want to achieve is neutral width of divs, the:

div {
  display: inline-block;
}

will be enough, but it will also cause div collapsing into one line, if its width allows that. If you want them to stay the way they are, I would actually recommend using flex display on container with those div like here

But after all, it depends what you want to get exactly, and you problem description is not enough to determine that.

Answer 3

<div> is a block level element which means by default it is always going to take 100% of its container's width. so, instead of 3 breakpoints as you mentioned, you can just mention 1 breakpoint, lets say 800px, and set the <div> 's width to be max-content

@media (max-width:800px) {
  div {
    width: max-content;
  }
}