Forum Support

Shape 5
April 18, 2021, 04:58:28 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Blog layout broken  (Read 590 times)
bonzomedia
Jr. Member
**
Offline Offline

Posts: 48



WWW
« 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
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 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

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
bonzomedia
Jr. Member
**
Offline Offline

Posts: 48



WWW
« Reply #2 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
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #3 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

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
bonzomedia
Jr. Member
**
Offline Offline

Posts: 48



WWW
« Reply #4 on: March 02, 2016, 09:48:07 AM »

Mike - That's it, many thanks!
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
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.