0

I'm using the Ascension theme (by Go Daddy). When my website is loaded using a PC or ipad my header looks ok, however when loading it on a phone it is not resizing to fit the screen (so I'm losing a bit from both ends) and also my page title is not in the correct place (top rather than middle). I would like to use two images to be displayed on to different devices. Can this be done in CSS or is it theme template modification? Just for the purposes of this question just say that I have two pics:

header-pc.jpg header-moblie.jpg

Many Thanks,

Paul

site: http://www.catherineparkersolutions.co.uk/

1 Answer 1

0

I’ll debug the source code after for detail anwser but I guest you can try this CSS solution:

@media screen and (max-width: 375px) {   css selector {     background-image: url("header-mobile.jpg");   } }

5
  • Thanks Linherest, This code works:
    – Paul
    Jun 23, 2019 at 12:21
  • '@media screen and (max-width: 375px) {.hero {background-image: url("catherineparkersolutions.co.uk/wp-content/uploads/2019/06/…); max-width: 100%; height: auto;}}' However it works 4 portrait only. So (in addition): '@media screen and (max-width: 375px) and (orientation: landscape) {.hero {background-image: url("catherineparkersolutions.co.uk/wp-content/uploads/2019/06/…); max-width: 100%; height: auto;}}' but that did not work (4 landscape) any ideas?
    – Paul
    Jun 23, 2019 at 12:38
  • Check your screen width in landscape mode. Then you change the max-width to this value. For example, your mobile has screen resolution 375 x 667. Then you can change the max-width to 667px. CSS will work for both cases: portrait & landscape. You can use screenresolution.org to check you mobile’s screen resolution.
    – Linherest
    Jun 23, 2019 at 12:53
  • That worked a treat 😀 Do you know whether there is a standard list of sizes that I should include in my @media statements which would cover 95% of all mobile devices?
    – Paul
    Jun 23, 2019 at 15:40
  • Based on Chrome Dev tool, we have some popular screen size like: Mobile S - 320px; Mobile L - 375px; Normaly, Wordpress Theme using max-width: 500px to cover the most mobile screen size.
    – Linherest
    Jun 23, 2019 at 15:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.