Solved

Issue with logos starting a new line

Posted on 2014-12-12
6
96 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
6 Comments
 
LVL 14

Expert Comment

by:Edwin Hoffer
ID: 40495763
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 43

Expert Comment

by:Chris Stanyon
ID: 40495842
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
ID: 40498053
I'm looking of the css of my parent and custom css but I can't find the .b-1 class
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 14

Expert Comment

by:Edwin Hoffer
ID: 40498092
Just check it in the header.php or index.php
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 40498828
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
ID: 40561206
Thank you
0

Featured Post

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

740 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