Pro button scaling to 100% of column (part II)

[Jimenez-Peralta]

I have an additional question in relation to my former question which has been locked.

I have added another button (image of a blue box) at the very bottom of my website and this button is also not scaling up despite the fact that the solution offered in my first post is still working for the buttons in the 2 column setup.
This problematic button is located in a single column row.
To reproduce please make your browser as wide as possible. Everything on the page will scale up except this button with the blue box. Do I need to add additional custom CSS in my child stylesheet? Besides:

.x-image img {
_ width: 100%;_
}

.hm3.x-image img {
_ width: auto;_
}

Thanks in advance,
Tijs

[christian]

Hey Tijs,

Add this to your page’s CSS

.x-anchor,
.x-graphic {
    width: 100%
}

If you wish to reuse code, please don’t use the dynamic unique class like .hm. Instead, add your own class to the element and use it so your code would be like .my-unique-class .x-image img

Hope that helps.

[Jimenez-Peralta]

Hi Christian,

Thanks for helping out. This solved this problem.

I added:

.x-graphic-secondary

for the mouse-over state of the button.

[Joao]

Thanks for letting us know!

[Jimenez-Peralta]

Hi guys,

Upon closer inspection the suggested CSS does something weird to the hamburger mobile menu. You can see this in a very small browser window on the desktop also. The three horizontal lines are no longer aligned with the mobile navigation circle.

Thanks,
Tijs

[albrecht]

Hi Tijs,

Add this CSS to fix the 3 horizontal lines.

.x-masthead .x-anchor .x-graphic{
   width: inherit;
}

Hope that helps.

[Jimenez-Peralta]

It sure did.
Thanks!

[christian]

You’re welcome.