Forum Support

 
Advanced Search


[1]

Offline bonzomedia
Free Member
Posts: 48 WWW
Posted on: 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.

Logged

Offline mikek
Free Member
Posts: 28743 WWW
Posted on: 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.
Logged

Offline bonzomedia
Free Member
Posts: 48 WWW
Posted on: 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...
Logged

Offline mikek
Free Member
Posts: 28743 WWW
Posted on: 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.
Logged

Offline bonzomedia
Free Member
Posts: 48 WWW
Posted on: March 02, 2016, 09:48:07 AM

Mike - That's it, many thanks!
Logged
[1]

Jump to:  


Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Page created in 0.017 seconds with 21 queries.
Need some help getting your site up and running? Be sure to check out our tutorials area, post on the forum or hire us
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.