How can I adjust page margins for mobile view and add a shopping cart logo?

Store Design
1

Hello! Can anyone please help me adjust the margins for my Contact page in mobile view? Its overlapping with my side menu! It looks fine with desktop and fullscreen view. I’d like to adjust the margins for my other pages too: lookbook, policy, sizing.

Also, how can I add a clickable shopping cart logo underneath the contact part of the menu? I’d like for it to pop up on the right side when you click it.

Thank you!

Screen Shot 2022-04-19 at 10.01.46 PM.png
Screen Shot 2022-04-19 at 10.01.46 PM.png904×1068 56.7 KB

2

Hi @lazzy99 , please provide your store URL so we can check and help you

3

pass: laz90yur

4

@lazzy99 , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
@media (max-width: 600px){
    .template-page .content-for-layout {
    max-width: calc(100% - 90px);
}
}

diego_ezfy_0-1650421796526.png
diego_ezfy_0-1650421796526.png507×561 14.9 KB

Kind regards,
Diego

5

Amazing, thank you!!

6

Also, is there a way I can add more padding above each page? Like more space above the “lazlara by lazlara studios” part, for each page.

7

@lazzy99

You can follow the aforementioned steps and use the following code:

.template-page {
      padding-top: 40px;
  }

@media (max-width: 749px){
      .template-page {
      padding-top: 20px;
  }

}

Kindly make sure to click on the button “Accept as Solution” below whichever answer solved your problem.

This way people with similar issues can also benefit from this in the future.

Kind regards,
Diego

8

Hi Diego,

I am having a similar issue in Envy template.

In the template page on mobile view the text begins right at the start of the side of the screen. I’d like to increase the margin either side of the screen. Is this something you can please help me with?

Bianca