[Resolved] Center background image in sections (Mobile)

[Kevin]

Hi,

I tried following the instructions provided in a previous post. However, I can’t get the mobile view to center the images … the CTA are shifted right.

Site: http://meine-ec-karte.de/

Previous Thread: https://generatepress.com/forums/topic/center-background-image-in-sections/

Thanks.

[Tom]

Hi there,

Which images am I looking for specifically?

[Kevin]

Hi Tom,

The images are in section 1, 3 and 5.

Section 2 has no image but on mobile view the headings are also not centered – just cuts off. But the text below is centered.

For section 4 I created 2 rows with columns – 33% Desktop, 50% Tablet, 100% Mobile

[Leo]

Hmm I’m not seeing the custom classes or CSS being added to those sections?

As for the headings getting cut off, it’s likely because all of this CSS being added:

#H2O_2 {
    box-sizing: border-box;
    color: rgb(238, 238, 238);
    height: 40px;
    text-decoration: none solid rgb(238, 238, 238);
    text-size-adjust: 100%;
    text-transform: uppercase;
    width: 570.667px;
    column-rule-color: rgb(238, 238, 238);
    perspective-origin: 285.333px 20px;
    transform-origin: 285.333px 20px;
    caret-color: rgb(238, 238, 238);
    border: 0px none rgb(238, 238, 238);
    font: normal normal 300 normal 27.2px / 40px "Open sans", sans-serif;
    margin: 20px 0px;
    outline: rgb(238, 238, 238) none 0px;
}

[Kevin]

I have removed the CSS … the issue with the headings is now resolved.

I’ve also changed the CTA button … How can I change the link color to white? It’s showing up as blue on the Home Page but on all other pages the Text is White (for both static and hover)

I’ve tried using this addition, but it did not work:

#nav a.active {
color:#FFFFFF;
}

Home Page > http://meine-ec-karte.de/
Page where CTA has been changed and the link color is White > http://meine-ec-karte.de/girokonto-ohne-schufa/

Regarding the images, I’m not sure which CSS to use

[Leo]

Can you follow the HTML and CSS structure here to make the button? https://docs.generatepress.com/article/adding-buttons/

Just to make sure, you would like to center the background images on mobile? But the focus of those images are actually on the side(s)?

[Kevin]

Hi Leo,

Thanks! Changing the HTML structure did the trick!

Regarding the images in the sections, the focus is somehow on the right … can I add css to make the image center and shrink to the screen size?

[Leo]

Tom’s method should work. So following the method here: https://generatepress.com/forums/topic/center-background-image-in-sections/#post-111009

To target at mobile only, you would need the media queries CSS here:
https://generatepress.com/forums/topic/center-background-image-in-sections/#post-138038

with center center; for the background position as the first link.

[Kevin]

Hi Leo,

Thanks! I got this bit fixed …

and created another issue > see the new ticket > https://generatepress.com/forums/topic/http-error-500-after-plugin-install/

[Leo]

No problem!

[Author]

Posts