[Resolved] Simple Mobile Responsiveness Request

[Josep]

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

[Leo]

Hi there,

Which element(s) are you referring to?

Let me know 🙂

[Josep]

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.

[Leo]

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 🙂

[Josep]

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!!

[Leo]

No problem 🙂

[Author]

Posts