: Blog layout broken : bonzomedia March 01, 2016, 12:08:59 PM The blog layout seems to be broken.
If you go to this page: http://goo.gl/ucvVTB ...and then reduce the browser width you'll see that the layout completely breaks just before going into mobile mode. The narrower the browser width the more it breaks! Some help needed please. : Re: Blog layout broken : mikek March 01, 2016, 12:30:14 PM Hello,
It's not breaking, it's just running out of room to show them in two columns anymore. You can try adding the following to the bottom of custom.css: @media screen and (max-width: 970px){ .row-fluid .span6 { width:100% !important; margin-left:0px !important; } } That will force them to a single column at 970px screen width. : Re: Blog layout broken : bonzomedia March 01, 2016, 12:35:34 PM That fixes it at 970px wide but continue narrowing the browser width and it tries to go back into 2 column mode and breaks again...
: Re: Blog layout broken : mikek March 02, 2016, 09:01:05 AM Hello,
I setup a localhost installation pretty similar to yours and with two columns and wasn't able to replicate any problems, it resized as it should with the default code. I see now that the issue on your site is because of a float on the images, which is causing the surrounding spans to not stretch to their full height. First, remove the custom css that I gave you above. After that I see two solutions: 1. Simply remove the float:left from each image, it isn't necessary to have. These are defined inline on the images themselves. 2. You can add the following to custom.css: .row-fluid [class*="span"] { float:left !important; } I would recommend step #1 Also, just to clarify, your images don't stretch the full width on desktop because you have inline height and widths defined on them. : Re: Blog layout broken : bonzomedia March 02, 2016, 09:48:07 AM Mike - That's it, many thanks!
|