Radcliff theme- screen size help

  • Unknown's avatar
    thewillowcommunitysupportservices · Member ·

    We are having issues with our screen stretching for different devices. How do we code it so it is a fixed size for any screen? Specifically having problems with custom header and feature image banner on our static page.

    Thank you in advance!!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    hallluke · Member ·

    Radcliffe is a responsive theme so by design the whole theme is coded to adjust to the screen size that it’s being viewed on. This means should someone view your site on a smartphone or tablet they still get a good browsing experience, well customised to their device.

    Changing the CSS to stop it being responsive is not usually a trivial task so if you’re set on using a theme that has a fixed width (and doesn’t look so great on mobiles or tablets) you might be better off searching for themes that are designed with that in mind.

    If you just want to make sure your header image is legible on smaller devices then test out this code in the CSS section of the site customiser, it should stop it cropping the edges off at different sizes:

    .header-image {
  background-size: contain;
  background-color: #fff;
}

    This will work even better if you re-upload the image but with the left-most fifth which is just white, empty space cropped off – then it’ll appear even bigger on smaller screens.

  • The topic ‘Radcliff theme- screen size help’ is closed to new replies.