[Paul T]

My site is http://www.franciscanfriars.org
I am using Catch Base Pro
I have used custom CSS to get a image behind the Header text, it is referred to as a background image in the CSS code… I like the way it looks on the large screen, full size display, because the menu serves as a boarder between the background image and the featured content slider.

However, on mobile devices, since the menu is different, there is no border between the header image and the featured content slider, and the two images clash. I would like to put a border, or a black line at the bottom of the header image on mobile devices only.

Note: I have found a solution that kinda works..I created a header image that is a black bar, and inserted it “Before Menu” on the entire site. However, I would prefer to not use header image on full site, but only on devices below 980 pixels. Is that possible????

[Paul T]

In the above request… I think it is more correct to say the following in the second paragraph..

However, on mobile devices, since the menu is different, there is no border between the BACKGROUND IMAGE and the featured content slider, and the two images clash. I would like to put a border, or a black line at the bottom of the BACKGROUND IMAGE on mobile devices only.

hope that clarification helps and does not confuse!

[Mahesh]

@friarpaul: Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:

@media screen and (max-width: 600px) {
    #masthead {
        border-bottom: 1px solid #000;
    }
}

Regards,
Mahesh

[Paul T]

That is a perfect solution! Love the Customer Support, and custom CSS feature on Catch Base themes is great feature, making design very adaptable!!!! Thanks

[Mahesh]

@friarpaul: Thank you for your appreciation and supporting us.
Have a nice day!!! 🙂

Regards,
Mahesh

[Author]

Posts