how to position divs according to width without media query

[mdavid]

Hi, I have a 3 column layout widths are:
1. 30% 2. 30% 3. 30%.
On screens < 900px I want them to appear:

1. 45% 3. 45%
<---2. 90%--->

I want to do this without media queries. Any suggestions?
I just started to look as css clamp() and was wondering if I could use it
to change size of div according to viewport size. Is this possible? How?
Any help much appreciated

 

[Antero360]

Hi, I have a 3 column layout widths are:
1. 30% 2. 30% 3. 30%.
On screens < 900px I want them to appear:

1. 45% 3. 45%
<---2. 90%--->

I want to do this without media queries. Any suggestions?
I just started to look as css clamp() and was wondering if I could use it
to change size of div according to viewport size. Is this possible? How?
Any help much appreciated

Hi there,
So what you may want to do is use media breakpoints:

Breakpoints

Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.

getbootstrap.com

 

[mdavid]

Thanks for this Antero, can you give me an example of using breakpoints without media queries.

Thanks

 

[rene7705]

Hi, I have a 3 column layout widths are:
1. 30% 2. 30% 3. 30%.
On screens < 900px I want them to appear:

1. 45% 3. 45%
<---2. 90%--->

I want to do this without media queries. Any suggestions?
I just started to look as css clamp() and was wondering if I could use it
to change size of div according to viewport size. Is this possible? How?
Any help much appreciated

clamp() will be a lot more cryptic than @media..

 

[mdavid]

Thanks Rene, guess @media is simplest.
just thought if the browser's aware of viewport size, then it may be simple to use clamp to determine div size, but I'm still learning

 

[rene7705]

@media - CSS: Cascading Style Sheets | MDN 😉

 

[mdavid]

I found I can replace @media query with @container query. So below css changes grid layout between mobile portrait and landscape.

.cq-container  /* container for grid */
 {
  container-type: inline-size;
}
.grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-gap:10px;
    height: calc(100vh - 10px);
      }
@container (max-width: 450px) {
    
 .grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr   
    }
}