Solved

Issue with logos starting a new line

Posted on 2014-12-12
6
92 Views
Last Modified: 2015-01-20
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
0
Comment
Question by:DancingFighterG
  • 2
  • 2
  • 2
6 Comments
 
LVL 12

Expert Comment

by:Edwin Hoffer
Comment Utility
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
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
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

0
 

Author Comment

by:DancingFighterG
Comment Utility
I'm looking of the css of my parent and custom css but I can't find the .b-1 class
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 12

Expert Comment

by:Edwin Hoffer
Comment Utility
Just check it in the header.php or index.php
0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
Comment Utility
In the <head> element of your pages you have the following:

<!-- This site is using AdRotate v3.11.6 Professional to display their advertisements - https://www.adrotateplugin.com/ -->
<!-- AdRotate CSS -->
<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:292px; }
	.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>
<!-- /AdRotate CSS -->

Open in new window


You'll see the styling in there for the b-1 class. It looks like it's being added by a plugin called AdRotate, so you need to find how that's being added and where it's pulling the CSS from.
0
 

Author Closing Comment

by:DancingFighterG
Comment Utility
Thank you
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Do you think that WordPress is just for blogs?  Think again!  WordPress is really a fantastic all around platform that you can use to develop websites on.  Integrated into its basic functionality is the ability to create pages using your choice of a…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now