How can I make my blog page CSS sections responsive for mobile viewing?

Technical Q&A
1

Hello Technicals!

So I’ve been trying to make our Blog page responsive for when it’s being viewed on mobile devices. The issue that I’m running into is that I can’t figure out where and how to add the [email removed] media query” instructions for the specific

s .

The site I coded creates a layout of 3 Rows with 2 Columns. but I would like them to stack into 1 Column of 6 Rows when the browser is at a max hight of 720px.

Any directions or even video/text links will be appreciated!

Here is a Link to the blog page I’m referring to. I also attached the code of the layout.

https://thechrysalislab.com/blogs/news/as-seen-in-vogue-magazine

  • Thanks, William
https://thechrysalislab.com/blogs/news/as-seen-in-vogue-magazine

       

              

                     

![1_1_480x480.png?v=1620102519|480x243](upload://8cDb9AT4WVKlJV6rSfbXjRghIat.png)

              

              
                     

VOGUE

Overjoyed to have our signature Viceroy Butterfly mask featured in the September 2020 issue of Vogue magazine! A huge thank you to TipsNTrends photo by Tony Duran.

 

                     

              

       

       

              

                     

![2_480x480.png?v=1620204480|480x243](upload://vtAUzDx9vJ7fTdwCdmJEqwBBo2X.png)

              

              
                     

INSTYLE

InStyle magazine featured our Metallic Monarch and Limited Edition Alexander McQueen mask in their December 2020 issue.

 

                     

              

       

       

              

                     

![3_480x480.png?v=1620206004|480x243](upload://jZZZ7yTY8dtgXgZqJNzNHz3bylQ.png)

              

              
                     

COTERIE

Our brand was  featured as a trend leader at the Coterie Digital Trade Event this Spring. Loved being a part of this show among so many other amazing creators!

 

                     

              

       

       

              

                     

![4_480x480.png?v=1620206613|480x243](upload://ys0ja7YdJFZ6J8Q55K4JhOjczrk.png)

              

              
                     

MONARCH EXPERIENCE AT THE COSMO

Styled by #EmmaTrask, the Monarch Experience featured at the Cosmopolitan Hotel has been nominated for, and won, numerous awards including the SEGD Global Design Award and the New York Festivals Third Prize Award.
2

hello @Cpinner do you want to look like this see screenshot http://prnt.sc/12m6d7u

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 768px){
 .template-article .article .rte .column{
    
    display: unset !important;
    flex-direction: column !important;
    flex-basis: unset !important;
    flex: unset !important;
    flex: 0 0 100% !important;

}
}
3

Hello, @Cpinner

Welcome to the shopify Community.

Please Go to Online Store → Themes → Edit code → Assets → theme.scss.liquid and paste this code at the end of this file.

@media only screen and (max-width: 600px) {
.vogue .row .column {
flex: 0 0 100% !important;
}
}
4

Yes ! Thanks a lot!

5

@Cpinner Thank you for the update.