How to optimize header for mobile fit

  • paulamagaz

    (@paulamagaz)


    6 years, 4 months ago

    Hey there!

    I’ve been struggling with the header on my site (paulamagazine.fi) for a while now. The logo header (“paula”) doesn’t display in its full size on other devices, e.g. mobile. Right now it cuts the header, and only looks fine on desktop.

    Also: the padding makes the site’s posts look funny – is there a way to fix the look of the articles without having to make a separate mobile site?

    I’ve tried googling a bunch of CSS but none have proven to work. Any idea what I should do? The deadline is running in close so I really need urgent help.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator t-p

    (@t-p)

    6 years, 4 months ago

    I recommend asking at https://wordpress.org/support/theme/capri-lite so the theme’s developers and support community can help you with this.

    George Appiah

    (@gappiah)

    6 years, 4 months ago

    Try this:

    background-image: url('/link/to/logo.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;

    Rather than adding this inline, you could conditionally apply this so it only affects smaller screens.

    For reference:

    contain: Scales the image as large as possible without cropping or stretching the image.

    cover: Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.

    • This reply was modified 6 years, 4 months ago by George Appiah. Reason: Added explanations of CSS COVER & CONTAIN
    Thread Starter paulamagaz

    (@paulamagaz)

    6 years, 4 months ago

    Hey there, George!

    I’m sure that’ll fix it, but I had trouble adding it in the ‘Responsive’ section (I was trying to make it affect only on smaller screens). Any tips on how or where exactly to add the in the ‘Responsive’ section?

    Cheers!

    George Appiah

    (@gappiah)

    6 years, 4 months ago

    @paulamagaz,

    Sorry for the delay. I’ve had this tab open in my Chrome browser for days, but I’ve been so busy here 🙂

    The background image is added inline. So that makes it a bit tricky. Let’s first add: 

    .blog-entry-header {
background-repeat:none;
background-size: contain !important;
}

    This will set the logo size to small for ALL screens. Though the use of !important is generally not recommended, we need it in your case to override the inline style.

    Now let’s restore the larger logo for larger screens only:

    @media screen and (min-width: 992px) {
	.home.blog .blog-entry-header {
		background-size: cover !important;
	}
}

    Please note that I picked the 992px break out point from your stylesheet. Feel free to change this to a different breakout out point.

    The “responsive section” you mentioned seems to be a feature of your theme — which I don’t have — so I’m not sure how that works.

    But you can add the above CSS code snippets anywhere that you can add custom CSS code. Eg. in your child theme’s style.css file, in your active theme’s custom CSS section in the dashboard (if any), in WordPress Customizer’s Additional CSS section (Appearance => Customize => Additional CSS), in JetPack’s Custom CSS section, etc, etc, etc.

    Kindly try it and let me know what happens — especially if the use of !important creates any unintended effect.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to optimize header for mobile fit’ is closed to new replies.