Solved

Margins and paddings issues on Mobile view?

Alliance
Trailblazer
500 8 26

Hi Guys,

 

I have issues with margins On mobile view. Looks acceptable on desktop view, but a mess on mobile view.  Can we fix the following:

 

1- Brands icons to be in 2 columns. 

2- Headers spacing, font sizes.

Alliance_0-1670505708594.png

 

Thank you

Accepted Solution (1)

GemPages
Shopify Partner
5588 1261 1209

This is an accepted solution.

@Alliance 

 

It's GemPages support team and glad to support you today.

I would like to give you a solution to support you:

1. Go to Online Store -> Theme -> Edit code:

 

GemPages_0-1669618959296.png

 

2. Open your theme.liquid theme file

3. Paste the below code before </body>:

 

<style>
  @media screen and (max-width: 749px){
    #shopify-section-1580280662236 ul.logo-bar {
      display: block;
      text-align: justify;
    }
    #shopify-section-1580280662236 ul.logo-bar li.logo-bar__item {
      width: 48%;
      display: inline-block;
      margin-bottom: 10px;
      position: relative;
    }
    #shopify-section-1580280662236 .logo-bar__image {
      display: block;
      margin: 0 auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      padding-left: 5px;
      padding-right: 5px;
    }
  }
</style>

 

Result: 

 

Screenshot at Dec 08 21-20-23.png

 

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 10 (10)

GemPages
Shopify Partner
5588 1261 1209

Hello @Alliance 

 

Could you please share your store URL or the page link ( with a pass if your store password is enabled ).  I think I can give you the right solution.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

MandasaTech
Shopify Expert
723 146 153

Hello @Alliance 
Please share your website URL.

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page
Alliance
Trailblazer
500 8 26

allianceautoproducts.com

Alliance
Trailblazer
500 8 26

allianceautoproducts.com

ExpertRookie
Shopify Partner
1518 249 314

HI @Alliance 

Your custom code to change the brand on desktop make the problem.
Have a look on this image and update your custom code in file theme.scss.liquid file.

 

@media only screen and (min-width: 750px){
  #shopify-section-1580280662236 ul.logo-bar {
    width: 90.3%;
    margin: 0 auto; 
  }
}

 

Alliance Group-0ffers full range of world class brands for ride & home – Alliance Car Care 2022-12-08 21-20-20.jpg

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
Alliance
Trailblazer
500 8 26

Excellent. I put the code in sccs instead.

PageFly-Victor
Shopify Partner
7865 1785 3058

Hi @Alliance 

This is Victor from PageFly - Landing Page Builder App.

 

You can try this code by following these steps:
Go to Online store => themes => actions => edit code  and add this code on file theme.scss.css

 

@media screen and (max-width: 767px){

#shopify-section-1580280662236 ul.logo-bar{
display: flex;

justify-content: center;
}
}

or theme.liquid on tag </body>

<style>
@media screen and (max-width: 767px){

#shopify-section-1580280662236 ul.logo-bar{
display: flex;

justify-content: center;
}
}
</style>


Hope this answer helps.
Best regards,
Victor | PageFly

GemPages
Shopify Partner
5588 1261 1209

This is an accepted solution.

@Alliance 

 

It's GemPages support team and glad to support you today.

I would like to give you a solution to support you:

1. Go to Online Store -> Theme -> Edit code:

 

GemPages_0-1669618959296.png

 

2. Open your theme.liquid theme file

3. Paste the below code before </body>:

 

<style>
  @media screen and (max-width: 749px){
    #shopify-section-1580280662236 ul.logo-bar {
      display: block;
      text-align: justify;
    }
    #shopify-section-1580280662236 ul.logo-bar li.logo-bar__item {
      width: 48%;
      display: inline-block;
      margin-bottom: 10px;
      position: relative;
    }
    #shopify-section-1580280662236 .logo-bar__image {
      display: block;
      margin: 0 auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      padding-left: 5px;
      padding-right: 5px;
    }
  }
</style>

 

Result: 

 

Screenshot at Dec 08 21-20-23.png

 

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Alliance
Trailblazer
500 8 26

Hi bro,

 

logoes not coming in two rows.

Alliance
Trailblazer
500 8 26

On mobike view, How to put "What about us" Pics in the middle. 

 

Alliance_0-1670518568083.png