HELP GUYS: Logo and header widget area not aligned

[Roberto Gomez]

Hi Guys:
I need your experience.

I have problem with the header widget area, I put a banner in the header widget area, the idea is that the logo and banner will be visually like a only element in computers and in the others devices like correspond.

I am testing with http://www.responsinator.com/?url=constructorameco.com%2F

I need that the logotype and banner occupy the total space of the header in height and width. In some measures the website show a line in red below the logo and banner, in other measure, the banner leaves a thick red line bottom.

Example: Red line below the banner
http://constructorameco.com/wp-content/uploads/2015/02/redine.jpg

Example: Red line in all the header
http://constructorameco.com/wp-content/uploads/2015/02/reslinedown.jpg

http://constructorameco.com

[LeifQ]

Roberto... right now your graphics are 90px height and the site header is 97px height.

Either try resizing both your graphics to 97px height, or try adding max-height: 90px to the site-header. Instead of loading a graphic in the header widget, maybe throw the image into the site-header background and some text in the widget over that. Should be around line 1098 of your child theme's style.css like so:

.site-header {
	background: url("/wp-content/uploads/2015/02/CintilloA1.jpg") #de0029 no-repeat center; 
	margin: 0 auto;
	padding: 0;
	position: relative;
	max-width: 100%;
	min-height: 90px;
	max-height: 90px;
}

Consider creating the logo as a .png file with a transparent background (except for the white oval in the middle).
But you'll have to play around with the media queries because it'll break again as it responds to smaller screens.

[Roberto Gomez]

Thks friend you let me the idea min-height: 90px; and max-height: 90px;
I put the next code and work fine:

.site-header {
background: #de0029;
margin: 0 auto;
padding: 0;
position: relative;
max-width: 100%;
min-height: 90px;
max-height: 90px;
}

.site-header .widget_text img {
max-width: 100%;
min-height: 90px;
max-height: 90px;
}

[LeifQ]

Nice!

[Author]

Posts