[Resolved] Header Images not aligning in responsive

[Joseph]

My header images are not aligning on responsive. You can view here, dallasbartendingschool.com.
Here is the hook I am using there are a total of 5 images in the header.

GP HOOKS?Before Header Content

I know using negative is frowned up but needed to to get the images to at least fit in responsive.

Can you shed some light on this.

Thanks you in advance.

[Tom]

That code didn’t work so well – can you try pasting and then highlighting the code and clicking the “code” button in the editor toolbar as you write your reply?

How are you wanting them to show up exactly? The layout will have to change a little bit to fit within the smaller screen.

Let me know 🙂

[Joseph]

Sorry Tom, the header part is not aligning as you see the logo to the left and the other images off centered. I just can’t get the header to center the logo and the images. Here is the site, bartendingschool.com if you want to view it in mobile.
Here is the code in the GPHOOKS / Before Header Content.

<div style="margin-top:0px;margin-bottom:10px;margin:auto;" class="grid-container grid-parent"><a href="http://dallasbartendingschool.com/"> <img style="float:left;margin-bottom:34px;" src="http://dallasbartendingschool.com/wp-content/uploads/2015/07/logo.png" /></a>
<img style="float:left;margin-left:10%;margin-top:0px;position:relative;" src="http://dallasbartendingschool.com/wp-content/uploads/2015/07/header.png"></a>
<a href="http://premiuminstitute.com/campus-location/"><img style="float:right;margin-right:1.5%;margin-top:0px;position:relative;" src="http://dallasbartendingschool.com/wp-content/uploads/2015/07/REGISTER_4SCHOOL.png" alt="register for Premium Bartending School" /></a><br /><a href="http://premiuminstitute.com/contactdallasbartendingschool/"><img style="float:right;margin-right:1.5%;margin-top:10px;margin-bottom:10px;position:relative;" src="http://dallasbartendingschool.com/wp-content/uploads/2015/07/REQUEST_MOREINFO.png" alt="request information for Premium Bartending School"  /></a>
<p style="float:right;margin-right:1.5%;">
<!-- Embedded ClickAndChat.com: Insert the script below at the point on your page where you want the Click To Chat link to appear -->

<script type='text/javascript' src='//server4gateway.clickandchat.com/include.js?domain=www.premiuminstitute.com'></script>

<script type='text/javascript' >

if(typeof sWOTrackPage=='function')sWOTrackPage();

</script>

<!-- End of embedded ClickAndChat.com -->

[Tom]

Ah, well you’re using inline css styles for the div elements there, so you can’t target them on mobile.

For example, for the logo, you have: style="float:left;margin-left:10%;margin-top:0px;position:relative;"

Instead, give it a class: class="my-logo"

Then add CSS to that class:

.my-logo {
      float:left;
      margin-left:10%;
      margin-top:0px;
      position:relative;
}

Then you can target it on mobile:

@media (max-width: 768px) {
      .my-logo {
            display: block;
            margin: 0 auto;
      }
}

You can do the same to the other elements, and tweak them on mobile to show up as you like 🙂

[Author]

Posts