Link to home
Start Free TrialLog in
Avatar of DancingFighterG
DancingFighterG

asked on

Issue with logos starting a new line

Hello, I'm trying to fix an issue with some logos on my site. The logos under sponsors should be lining up 6 rows and 4 per line but for some reason it keeps pushing the fourth item to the next line. What do i need to change in the css to fix this. Here is the website that has the issue - http://supercon2k.com
Avatar of Edwin Hoffer
Edwin Hoffer
Flag of United States of America image

Hello DancingFighterG,

There is a code on your index page:

<style type="text/css" media="screen">
	.g { margin:0px; padding:0px; overflow:hidden; line-height:1; zoom:1; }
	.g * { box-sizing:border-box; }
	.g-col { float:left; min-height:1px; width:8.33%; }
	.g-col:first-child { margin-left: 0; }
	.g-col:last-child { margin-right: 0; }
	.g-row:before, .g-col:after { content:""; display:table; clear:both; }
	.g-1 { width:100%; max-width:260px; }
	.b-1 { width:25%; margin:0px 5px 0px 0px; }
	@media only screen and (max-width: 480px) {
		.g-col, .g-dyn, .g-single { width:100%; margin-left:0; margin-right:0; }
	}
</style>

Open in new window


Update this code to the below one:

<style type="text/css" media="screen">
	.g { margin:0px; padding:0px; overflow:hidden; line-height:1; zoom:1; }
	.g * { box-sizing:border-box; }
	.g-col { float:left; min-height:1px; width:8.33%; }
	.g-col:first-child { margin-left: 0; }
	.g-col:last-child { margin-right: 0; }
	.g-row:before, .g-col:after { content:""; display:table; clear:both; }
	.g-1 { width:100%; max-width:260px; }
	.b-1 { width:68px; margin:0px 5px 0px 0px; }
	@media only screen and (max-width: 480px) {
		.g-col, .g-dyn, .g-single { width:100%; margin-left:0; margin-right:0; }
	}
</style>

Open in new window


Or you can only update ".b-1 { width:25%; margin:0px 5px 0px 0px; }" to ".b-1 { width:68px; margin:0px 5px 0px 0px; }"

Hope this will help you

Thanks
Edwin
Avatar of Chris Stanyon
Each of your logos is wrapped in a DIV with a class of b-1. The CSS for b-1 sets the width to 25% and a right margin of 5px, so your total width is 100% plus 20px - which won't fit on the row, so the last logo is dropped.

Either remove the right-margin or drop the width, so the whole lot adds up to 100% or less.

.b-1 {
    margin: 0 1% 0 0;
    width: 24%;
}

Open in new window

Avatar of DancingFighterG
DancingFighterG

ASKER

I'm looking of the css of my parent and custom css but I can't find the .b-1 class
Just check it in the header.php or index.php
ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you