Site logo

Archived topic

Simple Mobile Responsiveness Request

5 replies · Started by Josep on August 14, 2018

Viewing posts 1–6 of 6

I'm sure this is a simple fix that is just a touch above my skill level apparently.

My ad that I've placed on my website in GP hooks is displaying off center on mobile. How can I correct this so that it is centered on mobile as well.

http://www.artofboardgaming.com

Hi there,

Which element(s) are you referring to?

Let me know :)

I'm sorry about that - the giant miniture market ad at the top. "Life is good with games"

It looks great on desktop - it's pushed to the right by about 25-50 pixels on mobile.

Hmm replace your current HTML:

<div align="center">
    <a href="http://bit.ly/2soUfDo"><img src="http://www.artofboardgaming.com/wp-content/uploads/2018/06/NEWjune.jpg" alt="" width="900" height="300" style="padding:20px"></a>
</div>

To this:

<div class="banner">
    <a href="http://bit.ly/2soUfDo"><img src="http://www.artofboardgaming.com/wp-content/uploads/2018/06/NEWjune.jpg" alt="" width="900" height="300"></a>
</div>

Then add this CSS:

.banner {
    text-align: center;
    padding: 20px 0;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps :)

Perfect! It was displaying to the left on desktop when I made this change but I just added align="center" to the div tag and it fixed it. THANK YOU!!

No problem :)

This archived topic is closed to new replies.