CODEWITHSUNDEEP
htmlcssshopifyresponsive-images
Brie
Brie

Reputation: 11

Banner image being clipped, not showing as full browser width

I had a programmer code a page for my site, but when we migrated the code to my site (on Shopify), some of the things stopped working. I've been able to fix almost everything, but the top banner is still giving me trouble.

I want it to fill the full browser width (like the other banner a bit further down the page) but it's being clipped to 970px wide. How can I fix this to make it responsive and fill the full browser width? I also want the whole page to be centered under the header.

And the code I'm using is here (I'm including the full code so I don't miss anything important): codepen.io/anon/pen/xZZwZN

When I run it in codepen it works, so I'm wondering if it's clipping it because of the page width coded into my Shopify theme. Any ideas on how to fix/override this on this page only?

Upvotes: 0

Views: 445

Answers (2)

Leo the lion
Leo the lion

Reputation: 3065

as i have seen in your site, you just have to remove float:left; from skeleton.css link for particular page so go in this file and remove from .container .column, .container .columns this class and your site is ok :) If you can't find the class then note line no 26 in your css file.

Upvotes: 0

hkasera
hkasera

Reputation: 2148

Remove float : left from the css of .container .columns to center align.

After changing this, the page looks like below -

enter image description here

Hope that helps!

Upvotes: 1

Related Questions