CODEWITHSUNDEEP
csswordpress
Eric Mesa
Eric Mesa

Reputation: 11

How do I use CSS to control which part of an image shows in mobile version of site?

So I recently decided to go with the Twenty Fifteen theme on my self-hosted Wordpress blog.

In this theme the "header" image is actually the sidebar image when you're viewing on a desktop. When it's viewed on a tablet or smart phone, the image moves to the header and is vertically cropped. (In addition to being scaled based on the horizontal length)

For the sight-impaired, the sidebar image is a photo of me. When it's vertically cropped for the mobile version of the site you just see my chin and neck. So I have two questions.

  1. How might I use Wordpress's CSS over-ride customization page to move the crop so that it shows my face rather than my chin/neck?
  2. How might I use the over-ride customization page to maybe increase the header size a bit in the case that my face needs a bit of space to not look strangely cropped? (I've played with this before on my sister-in-law's wedding page, but I just messed around until it looked right on the desktop - it still looks borked on the phone, so I'm hoping that any advice I get here would be code that would look good on all of the form factors the theme supports)

As I mentioned as part of question 2, I've messed around with CSS, but I'm not really well-versed in it. I'm guessing the answer to this question would point me in the right direction and then I can use my programming experience/tinkerer's mindset to get things looking right. Bonus: whatever help I get with this situation will also be useful in fixing mobile on my sister-in-law's site as well.

Upvotes: 0

Views: 70

Answers (3)

Kentin Durillon
Kentin Durillon

Reputation: 58

In your style sheet you can set-up media queries. See this course from W3C : http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Another solution is to use a responsive CSS framework such as Bootstrap (a framework made by the Twitter that is totally license-free and pretty much easy to learn and use) the bes thing is that it also helps you a lot with your positionning : http://getbootstrap.com/getting-started/

Upvotes: 1

Eric Mesa
Eric Mesa

Reputation: 11

OK, sorry if I'm doing a Stack Overflow faux pas, but I'm not sure how else to have it make sense that I now know the answer.

Someone from Wordpress replied to somewhere else where I'd posted the question. All I had to do is:

.site-header {
background-position: 50% 30% !important;}

And then it worked. It didn't affect the desktop (I did a control-shift-R reload to make sure it wasn't a cache thing) and it works perfectly for the phone.

Is it the !important that makes it work? Why does this work? Seems infinitely easier than what was suggested, but I don't know why.

Upvotes: 0

Jeff Clarke
Jeff Clarke

Reputation: 1397

Override the .site-header class and play around with the background position and the minimum height. Here's a quick modification that may suite your needs:

.site-header {
  background: url(http://www.ericsbinaryworld.com/wp-content/uploads/2015/04/for-blog-header-22-Edit1.jpg) no-repeat 50% 25%;
  min-height: 200px;
}

The 25% value specified for the background is its vertical position. Since the background image scales with the size of the container, think of this as the scale origin point. Adjust this number as desired. FYI the 50% value is the equivalent for the horizontal position.

the min-height property is just that -- the minimum height of the container.

As one other commenter pointed out, you'll likely want to combine this with a media query so that it is only in effect for certain screen widths. Google "CSS Media Queries" for more info.

Upvotes: 0

Related Questions