Background color, widget row color and textcolor on mobile

Hi there again,

Getting frustrated… My page www.riihonmajatalo.fi is already finished but I’m having trouble with the mobile wive. On desktop wive I`m guide pleased to. Mobile wive is not readable.

  1. How can I get rid of the background color I have set Appearance -> Customize -> Background Image?
  2. I have set an image on each page using row widget - How can I get rid of that too?
  3. On each page there is a Custom Header image set using Unique Headers plugin - these images should remain…
  4. The idea is to get a white background and black text, also on all the headers - how can I do that?

I’m sorry - that’s a lot of trouble for me. I hope you can help me. I don’t really care how that’s done but I’ll appreciate all the help you can provide to me.

If you have a better way to do that, it’s ok.

Thank you so much,

mikko

Hello Mikko,

> 1

Just hit remove button in the Appearance > Customize > Background Image.

> 2

In the row options, expand the Design tab and then remove the background image.

> 3

Make sure header image is enabled in the Appearance > Customize > Header area > Header type > Site header type.

> 4

The background is white by default. Do you get something different after doing those 3 above?

Regards,
Kharis

Hi Kharis,

Thank you for your answer. The thing is that I would like to have those 1.,.2. and 3. visible on the desktop and loose them on mobile. Is there a easy way to do that?

Thanks,

mikko

Hello there,

You can use this extra CSS code.


@media only screen and (max-width:1024px) {
    
    /* Remove body background image */
    body.custom-background {
        background-image: none;
    }
    
    /* Display header image */
    .header-image {
        display: block !important;
        background-image: url('http://yoursite.com/path/to/your/image.jpg');
    }
     
    /* Remove row image background */
    .remove-background-mobile {
        background-image: none !important;
    }
    
}

To apply it to your site, add it to Appearance > Customize > Additional CSS from your site dashboard.

Edit the row where you set a background image, in the Row Styles option, expand the Attributes tab, in the Row Class input field, enter remove-background-mobile.

Regards,
Kharis

Hi Kharis,

That did the job, nice! That caused me another problem though. If you could please take a look at the page www.riihonmajatalo.fi/majatalo Now I have a huge white gab between the text part and the red CTA button on the bottom (above social media buttons). How can I make that more narrow but only on mobile view?

Thank you so much again!

mikko

Mobile padding is set to 0 from the row layout settings.

Hello there,

It happens because your CTA text color is white, so that it’s invisible on mobile screen. You should add this CSS code to make it darker.


@media only screen and (max-width:1024px) {
  #pg-139-1 .promo-content .title {
    color: #000 !important;
  }
} 

Regards,
Kharis

Hi Kharis,

Arg… My bad I didn’t realise the title font color. I’a sorry for that. The rest was out of my league anyway.

@media only screen and (max-width:1024px) {
#pg-139-1 .promo-content .title {
color: black !important;
}
}

I afraid but that code didn’t work. I also tried:

@media only screen and (max-width:1024px) {
#pg-139-1 .promo-content .title h3 {
color: black !important;
}
}

and

@media only screen and (max-width:1024px) {
#pg-139-1 .promo-content h3 {
color: black !important;
}
}

and

@media only screen and (max-width:1024px) {
#pg-139-1-0 .promo-content h3 {
color: black !important;
}
}

and

@media only screen and (max-width:1024px) {
#pg-139-1-0 .promo-content .title {
color: black !important;
}
}

I use Chrome on my iPhone. Use it incognito and cleared the cache too. These tricks did’t work ether. What else can I try?

Cheers,

mikko

Hi Kharis,

Now, a couple of hours later, the code seems to work. I don’t know what happened. I was doing totally something else during the couple of hours and then suddenly it started to work. I had cleared the cache of the browser a lot of times when I was testing the code. The main thing it’s working now

@media only screen and (max-width:1024px) {
#pg-139-1 .promo-content .title {
color: black !important;
}
}

Thanks for your help :slight_smile:

mikko

WP Super Cache caused the problem…

Great! that you figured that out.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis