Better Mobile Version?

Illdy
1

My site looks terrible on a mobile device.
Any suggestions on how to fix this?
Thanks
www.datingtipsfordudes.com if you’d like to take a look

2

Hey there,

Have you made any changes in regards to the CSS for the header? I’m seeing where you’ve set the background-attachment to initial which essentially displays the full height of the image.

I’ve provided you with some CSS that should fix the header on mobile. Kindly add and save the following code to Appearance > Customize > Additional CSS:

@media only screen and (max-width: 1024px){
  #header{
    background-attachment:fixed!important;
    background-position:left!Important;
  }
}
​
@media only screen and (max-width: 1024px){
  #header .bottom-header{
    padding-top:90px!Important;
  }
}
​
@media only screen and (max-width: 1024px){
  .top-header{
    display:none!Important;
  }
}

I hope this helps :slight_smile:

Best Regards,
Support

3

Hi! Thank you for your response! I added the CSS as you suggested above (and to answer your question, no I didn’t change any CSS, but maybe when I uploaded the picture I didn’t click the right resize option, although I can’t remember what it asked upon upload).

The site is looking better on a mobile but you can’t see my face/body part of the picture. Is there a way to make the picture even smaller on the mobile?

Thanks in advance
Blaire

4

Hi there,
Thanks for keeping in touch with us.

Please replace the first CSS with the one linked below:

@media only screen and (max-width: 1024px){
#header {
    background-attachment: inherit!important;
    background-position: left!Important;
    height: 465px!important;
     }
}

If the banner gets any taller, you’ll start seeing the text and button on the banner bleeding over the rest of the content which I’m pretty sure looks way worst than what you currently have. In regards to seeing more of the woman’s body, the width of mobile displays won’t allow that since the image is a landscape image and your phone is a portrait display, hence the cropping.

Use this to remove the menu:

@media only screen and (max-width: 1024px){
.top-header {
    display: none!Important;
    }
}

This should pull the text on the header up back in view:

#header .bottom-header {
    padding-top: 0px!Important;
}

I hope this helps.

Best Regards,
Support

5

Hi! I ended up keeping the CSS for what you had above originally. I tried putting in the new CSS and it seemed to make it look strange, so I kept it as is. We’re good with this thread, you can mark it resolved. Thank you very much!

Oh, but actually, a minor question (possibly) I want to change the color of “Dating Tips For Dudes” on that header picture. It’s white now and I can’t find as to where or how to change this color. Can you point me in the right direction? Thanks!

6

Actually one more question about the mobile version. Is there a way to make the HEIGHT of the header picture (the picture of the girl) smaller on the mobile version only?