0

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?

Arjun
  • 736
  • 1
  • 8
  • 24
Brie
  • 11
  • 1
  • 2
  • And the code I'm using is here (I'm including the full code so I don't miss anything important): http://codepen.io/anon/pen/xZZwZN – Brie Dec 15 '15 at 05:35

2 Answers2

1

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!

hkasera
  • 2,118
  • 3
  • 23
  • 32
  • Thanks! But if I do this, it changes on my whole site. I just need to fix this one page. Is there a way to override this on this page only? – Brie Dec 15 '15 at 05:56
  • Yes you can add a specific class in the body of the HTML of this particular page say "homepage". Now your CSS could be - .homepage .container .columns { float: none;} – hkasera Dec 15 '15 at 06:00
  • I think I'm misunderstanding... In skeleton.css I added another line: ".trunkshow .container .columns { float: none; display: inline; margin-left: 10px; margin-right: 10px; }" And in the html of this specific page, I added: "
    " But it didn't change anything. Is this what you meant for me to do? Sorry, I'm new at CSS/html! I really appreciate your help!
     – Brie Dec 15 '15 at 06:19
0

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.

Leo the lion
  • 3,164
  • 2
  • 22
  • 40
  • Thanks! I found it, but if I do it this way it changes my whole site. I just need to fix this one page. Is there a way to override this on this page only? – Brie Dec 15 '15 at 05:57
  • I don't want the header to change at all, I only want that first banner image to be full width. It's working on the banner a bit further down the page, so I'm assuming it's possible to get this one to work the same way. – Brie Dec 15 '15 at 06:08
  • Yes, those are more problems to deal with later when I can have a programmer work on the site. For now, I just want to change the banner image to full width so I can at least use this page of my site. Do you know a way to do that? – Brie Dec 15 '15 at 06:12