Mobile optimization. Reduce padding. Minimal theme.

MikeyD
Tourist
14 0 1

Hi, I would like to optimize my site for mobile viewing. Desktop is OK, mobile has too much spacing/padding. I've tried all the codes on here with no luck so far.

 

Desktop view:

 

headdesktop.jpg

 

Mobile view:


iamgesmobile.jpg

headmobile.jpg

 

 

Any advice would be great.

 

Thanks,

Michael.

 

0 Likes
PremierStores
Shopify Partner
270 26 50

Hi, @MikeyD:

Add this code at the bottom of your CSS file

@media screen and (max-width: 768px){
  .index-section .grid-link__image{
    height: 210px !important;
  }
  .index-section .grid-link{
    padding-bottom: 0;
  }
}

 

Let's make the best store!
Contact us at: thepremierstores@gmail.com
0 Likes
MikeyD
Tourist
14 0 1

Thanks a lot for the reply that tightened things up a bit!

0 Likes
Styleper
Tourist
5 0 0

Hi there,

My store is www.styleper.com and I am having trouble reducing the white space between each section on the homepage for mobile version as well. On desktop it is fine now, but for mobile version it still has a large white space. Can you kindly tell me where I should paste the code as I am not familiar with coding & the Shopify Support Team is not willing to help

I tried pasting at the bottom of Assets - theme.scss.liquid file but it is not working. Hope you'll be able to help, thank you and stay safe!

0 Likes
MikeyD
Tourist
14 0 1

Hello,

You have just received a confidential email via Tutanota (https://tutanota.com). Tutanota encrypts emails automatically end-to-end, including all attachments. You can reach your encrypted mailbox and also reply with an encrypted email with the following link:

Show encrypted email

Or paste this link into your browser:
https://mail.tutanota.com/#mail/Md6pbEJ--3-2A4wpIy_HIfY0qfxA9OVDxg

This email was automatically generated for sending the link. The link stays valid until you receive a new confidential email from me.

Kind regards,
Michael Macdonald

0 Likes
Natztech
Shopify Partner
1328 366 903

hello @Styleper 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file. see screenshot https://imgur.com/eGBKBmq

 

@media only screen and (max-width: 749px){
#shopify-section-1591765464650 span.grid-link__image.grid-link__image--product{
    min-height: 200px;
    height: 200px !important;
}
#shopify-section-1515754851186 span.grid-link__image.grid-link__image--product{
    min-height: 200px;
    height: 200px !important;
}
}

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
Styleper
Tourist
5 0 0

Hi,

Thank you so much for your help, really appreciate it! I've tried pasting the code as per guide, but it doesn't seem to work though. There is still a large white space between each section on the homepage.

IMG_8347.PNG

 

IMG_8348.PNG

 

Screenshot 2021-06-27 at 2.08.12 PM.png

 

0 Likes
Natztech
Shopify Partner
1328 366 903

hello @Styleper 

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

@media only screen and (max-width: 749px){
#shopify-section-1591697553464 {
padding-top: 0px;
}
#shopify-section-1595844835841{
    padding-top: 12px;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
Styleper
Tourist
5 0 0

Hi there,

Thank you so much, it works perfectly now! Really appreciate your help, stay safe!

0 Likes