• GoDaddy Community
  • Websites + Marketing | Website Builders
  • Websites + Marketing | Website Builders

    cancel
    Showing results for 
    Show  only  | Search instead for 
    Did you mean: 
    Go to solution

    Header image cropped on mobile version of my website - vellum theme

    Hello,

    My header is being cropped on mobile version. I have tried multiple things but nothing works seems like an issue with the theme. PLEASE HELP. IT'S URGENT! www.thatfancypants.in

    6 REPLIES 6
    Helper IV
    Helper IV

    Re: Header image cropped on mobile version of my website - vellum theme

    1. You have to create another image for mobile version. Resize your image to fit mobile screen using any photo editor. In windows, Right click your image and choose edit.

    2. Upload to your wordpress media. And copy the url of that image.

    3. Go to Apperence>customize>Additional CSS in your admin dassboard and paste the below code

    with the url being the url of mobile version image that you have uploaded.

     

    @Media ( max-width: 425px ){
    .site-header{
    background-image: url("url_of_your_mobile_version_image") !important;
    max-height: 150px !important;
    background-position: 49% 0px !important;
    }
    }

     

    That's it.

    Give me a kudo if you like this and mark this as solved, If you got a solution.

    Helper IV
    Helper IV

    Re: Header image cropped on mobile version of my website - vellum theme

    Make mobile version of your image, that fits on your mobile screen. Then add it to media in your wordpress site. Then copy the below code to Apperence>customise>Additional css in your wordpress admin dashboard.

     

    @Media ( max-width: 425px ){
    .site-header{
    background-image: url("url_of_your_mobile_version_image") !important;
    max-height: 150px !important;
    background-position: 49% 0px !important;
    }
    }

     

    use your image url in the url provided in the above code.

    You can also use max-width: 600px instead of max-width: 425px. To make it available on big mobile screen

    Re: Header image cropped on mobile version of my website - vellum theme

    Hello Mithun, 

     

    Thank you so much for this quick resolution! Although there's another issue with this now the header text interferes with my image. Is there a way to reduce the hero text size? Thank you!

    Helper IV
    Helper IV

    Re: Header image cropped on mobile version of my website - vellum theme

    @Media ( max-width: 425px ){
    .site-header{
    background-image: url("url_of_your_mobile_version_image") !important;
    max-height: 150px !important;
    background-position: 49% 0px !important;

    font-size:15px !important;
    }
    }

     

    I have added another line of css for font size. Try this. You can alter the value of font size in above code from 15px to the size of your need.

     

    Mark this as solved if your problem solved. Still If you have any problem please let me know

     

    Re: Header image cropped on mobile version of my website - vellum theme

    Hi, 

     

    Thanks for the swift reply. This is changing the font size of the text but not the title. I'm looking to change the font size of "STRESSED WHILE SHOPPING?" TEXT HERE -  http://thatfancypants.in

     

    Looking for the change to appear both on desktop and mobile. Could you suggest something else? Thank you

    Helper IV
    Helper IV
    Solution

    Re: Header image cropped on mobile version of my website - vellum theme

    @Media ( max-width: 425px ){
    .site-header{
    background-image: url("url_of_your_mobile_version_image") !important;
    max-height: 150px !important;
    background-position: 49% 0px !important;
    }
    }

    .site-header{
    font-size:15px !important;
    }

    .widget-title{

    font-size:25px !important;

    }

     

    This should work. change both font-size value according to your need. You can also use max-width: 600px instead of max-width: 425px for displaying mobile version text and image in bigger mobile screen.