Responsive Logo

[sharonq]

I must be missing something simple… I’m updating a site I created a year ago and just tested it on an ipad and it’s not acting as responsive as I would like – the logo and slideshow do not resize.

The first thing to fix is the logo. This is what I have in the CSS: (I’m using dark child theme with a few customizations).

website: http://www.playinthewoods.ca

}
/* header Logo */
.header_logo_image {
    float: left;
    max-width: 100%;
    height: auto;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

is the the correct way to get it to resize?

Topic

[Jason Bobich]

Hi,

It’s not that it’s currently not responsive, but it just has to do with how you’re floating the elements.

How exactly are you wanting the site to scale? At one point do you want the elements to stack? At the tablet viewport do you want it stay with the same structure with logo on the left and slider on the right? These are the kind of things you need to plan as you setup the responsiveness of the header.

For example, in order to keep the two items side by side, as the site scales, you’d need to keep them both floated, and then apply a percentage width like 50% and 50% to both items. Also, currently you’ve got max/min pixel widths on your slider, which you’d need to remove.

[sharonq]

Thanks Jason.

What I would like is for them to keep relative widths – say 1/3 for the logo and 2/3 for the slider – I’ll see if I can do that. The site should be viewed by tablet or computer – its not set up (or appropriate) for smartphones.

[Jason Bobich]

Hopefully this will get you started:

.header_logo_image {
	float: left;
	width: 33.33%;
}
.logo_left {
	float: right;
	width: 66.66%;
}

And then you could make it so your logo as a little room to breathe on the right like this:

.header_logo_image .tb-image-logo {
	display: block;
	margin-right: 20px;
}

Other things to note:

1) Make sure to remove min-width/max-width from slider .logo_left section.

2) Make sure that under your responsive styles in style.css, you remove where it sets float:none to .header_logo_image.

[Author]

Replies