What's your biggest current challenge? Have your say in Community Polls along the right column.

DEBUT THEME SECTION ALL SQUISHED UP

Solved

DEBUT THEME SECTION ALL SQUISHED UP

bkparts
Tourist
9 0 3

https://bkmotoparts.com/

 

If you scroll down to Shop by Riding Style, you will see all the tiles are squished to the right.

 

I haven't made a single coding change to it in forever, I just happened to scroll down and saw it turned out like that since who know when!!

 

Please help

 

Thank you!!

 

Accepted Solutions (2)

PageFly-Richard
Shopify Partner
4808 1088 1758

This is an accepted solution.

Hi @bkparts 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
div#gf-products ul.collection_slider10 {
    width: 100%;
} 
</style>

PageFlyRichard_0-1729730796474.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly 

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

tim
Shopify Partner
3911 394 1435

This is an accepted solution.

This happens because the Globo App for whatever reason attaches itself to this section and applies its own CSS code to this section.

You should check your App configuration or contact App developer for support.

 

Or, if you happy to edit theme code, then I'd rather suggest using this CSS code:

 

.template-index #gf-products {
  display: block;
  margin: 0;
}

 

 

Or,  you can use "Custom CSS" setting of the section in question and then use this:

 

#gf-products {
  display: block;
  margin: 0;
}

 

This is always a nicer option because it targets only specific section and would not prevent theme updates (not sure they still update Debut though, but in general)... 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

Replies 3 (3)

PageFly-Richard
Shopify Partner
4808 1088 1758

This is an accepted solution.

Hi @bkparts 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
div#gf-products ul.collection_slider10 {
    width: 100%;
} 
</style>

PageFlyRichard_0-1729730796474.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly 

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

tim
Shopify Partner
3911 394 1435

This is an accepted solution.

This happens because the Globo App for whatever reason attaches itself to this section and applies its own CSS code to this section.

You should check your App configuration or contact App developer for support.

 

Or, if you happy to edit theme code, then I'd rather suggest using this CSS code:

 

.template-index #gf-products {
  display: block;
  margin: 0;
}

 

 

Or,  you can use "Custom CSS" setting of the section in question and then use this:

 

#gf-products {
  display: block;
  margin: 0;
}

 

This is always a nicer option because it targets only specific section and would not prevent theme updates (not sure they still update Debut though, but in general)... 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
bkparts
Tourist
9 0 3

Thank you so much  guys !!