CSS - Changing width of text block in desktop vs. mobile

Technical Q&A
1

Hi,

I am VERY new to coding, and was able to change the width of a block of a text on my site using the following code applied directly to the section in the Custom CSS in the theme editor:

div {
width: 600px;
margin: auto;
padding-top: 50px;
padding-bottom: 100px;
}

This achieved the look I wanted for desktop, but I want a different width for mobile (100% width). Where and what exactly do I need to do to make the text block full width on mobile?

Any help is greatly appreciated! Thanks :slightly_smiling_face:

2

@Jordan_LaFragol

@media (min-width:768px) {

div {
width: 600px;
margin: auto;
padding-top: 50px;
padding-bottom: 100px;
}

}

@media (max-width:767px) {

div {
width: 100%;
margin: auto;
padding-top: 50px;
padding-bottom: 100px;
}

}

3

Thank you for this! However, when I put this code in instead, it doesn’t work on desktop, it just sets both desktop and mobile to 100% width. I am copying the code into the ‘custom css’ section in the theme editor panel. Should I be pasting it somewhere else instead?

4

Can you share the store URL and point to the section where you trying if possible send a screenshot