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: /

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/

• theme-customizer
• headers

1 Answer 1

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");   } }