Gumby columns displaying as block elements in Chrome

265 Views Asked by txl879 At 05 April 2025 at 10:31

This is the first site I have built with Gumby and I am something of a beginner when it comes to web design in general.

I have been scratching my head for hours now about why my site shows up perfectly in Firefox and Safari, but is a chaotic mess in Chrome. It looks like every set of columns are showing up as block elements, whilst the navbar isn't showing up at all...

I ran it through the W3C html validator and it informed me that the hgroup tag has been abolished, but that shouldn't mess up the page so much, should it? And most of all, not only in Chrome?

Possible causes:

In an effort to make the site non-responsive while I develop that aspect of things, I removed the breakpoints and messed with some of the settings in _var.scss / Probably the most likely reason but I don't know what is affecting it in this way.
I've used the row as a wrapper around the header and section parts.. Could this be messing with the way columns are displayed somehow?
In the header part I used @include columns(6) to include the columns in the html without creating another div. Does Chrome not like this?

This is the link to my site: http://work-in-germany.eu/

As you can see, it looks fine in Firefox and Safari, but not in Chrome.

THANK YOU so much for any help!

Tom

Original Q&A

There are 1 best solutions below

Rolf On 16 July 2013 at 08:37

Wow, it really is a mess in Chrome! But not unmanageable.

First of all, you should wrap the whole page. This to center the content. For example:

HTML:

<body>
<div id="page_wrap">
-- Your content (rows etc.)
</div>
</body>

CSS:

.page_wrap {
 margin: auto;
 width: 980px;
}

As for the rows. Add the following to the css classes:

CSS:

.index_section .row {
 overflow: hidden;
 padding: 15px 0;
}

.index_section .img_box img {
 float: left;
 margin: 0 15px;
 max-width: 280px;
}

Sorry, due to lack of time this was all I could do right now. Good luck!

Gumby columns displaying as block elements in Chrome

There are 1 best solutions below

Related Questions in CSS

Related Questions in HTML

Related Questions in GOOGLE-CHROME

Related Questions in RESPONSIVE-DESIGN

Related Questions in GUMBY-FRAMEWORK

Trending Questions

Popular # Hahtags

Popular Questions