CODEWITHSUNDEEP
htmlcssresponsive-design
kb0000
kb0000

Reputation: 444

Responsive CSS Div Width

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.

Upvotes: 5

Views: 27073

Answers (3)

Awekening_bro
Awekening_bro

Reputation: 61

<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;
  }
}

Upvotes: 6

B.Balakrishna
B.Balakrishna

Reputation: 71

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;
  }
 }

Upvotes: 4

m.cekiera
m.cekiera

Reputation: 5395

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.

Upvotes: 2

Related Questions