Make section full width on phone, but not on computer

Store Design
1

Hello!

I’m having a trouble making 2 seperate pages, on phone and on computer. I want a section full width on phone, but not on computer. There is a button “Make full width” for that section, but can’t figure out how to make it only full width on phone, and not on computer.

I wish Shopify was as simple as Wocommerce, where you could use it as Elementor haha :slightly_smiling_face:

2

Hi @leosef ,

Please send your site and if your site is password protected, please send me the password. I will check it.

3

@leosef can you send me the url of this page and the password (if any)?

4

Sent, please check PM.

5

Sent, please check pm

6

Hi @leosef ,

Please go to promo-grid.liquid file and add code here:

Screenshot.png
Screenshot.png1441×688 40.9 KB

7

That solution is to remove full width from both phone and computer. I only want to remove full width from computer, and make 20px padding between pictures. I have setting to do that on theme customization, but that will remove from phone aswell. I want it like this on computer:

Like this.png
Like this.png998×473 207 KB

8

@leosef hey bro, you can try with this code

Add this css at the bottom

Online Store->Theme->Edit code

assets->theme.css

.main-content {

margin-left: 100px !important;

margin-right: 100px !important;

}

@media (max-width:767px) {

.main-content {

margin-left: 0px !important;

margin-right: 0px !important;

}

}

9

That makes everything even the banner, just want the middle banners of phones.

10

Hi @leosef ,

Go to Assets > theme.css and paste this at the bottom of the file:

@media only screen and (min-width: 769px) {
  #shopify-section-165765695694f6a40d .promo-grid {
    max-width: 1500px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
  }
}