Mobile version Heade image | ww.wp.xz.cn

Resolved gnumengor
(@gnumengor)

10 years, 3 months ago

Hi!

I’m using the Sela theme and I’m very happy with it!

I only have one concern: the site header image is 667 pixels width.

When surfing the site with low resolution devices (mobile), the header image is always centered and not stretched, so the lower resolution, the less part of the header image I can see. I mean, it gets cut, and my site title gets cut too.

Is there any way of changing the header image to another one when using mobile devices, by using custom css??

Many thanks!

Viewing 2 replies - 1 through 2 (of 2 total)

Thread Starter gnumengor
(@gnumengor)

10 years, 3 months ago

Hi!!!

I solved it by using this code:

@media screen and (max-width: 600px) {
#masthead .site-branding {
background-image: url(smaller-image-url.jpg);
background-size: 100%;
background-position: center;
}
}

which I borrowed from here:
https://ww.wp.xz.cn/support/topic/header-doesnt-display-fully-in-mobile-version?replies=15

🙂

Moderator Kathryn Presner
(@zoonini)

10 years, 3 months ago

Thanks for sharing your solution!

Just a heads-up not to edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated to the latest version.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Mobile version Heade image’ is closed to new replies.

2 replies
2 participants
Last reply from: Kathryn Presner
Last activity: 10 years, 3 months ago
Status: resolved