Mobile Customization

  • Author
    Posts
  • #136134

    bassirilaw
    Member
    Original poster

    Hello – I added an image to the header which works well for desktop but not mobile. I reached out to a developer to make changes to the mobile view and was told the files are not accesible for customizaiton. Any input would be appreciated.

    Thanks
    Mike

    https://bassirilaw.com/

    #136137

    binarymoon
    Theme Author

    Hi Mike

    If you have another image you want to use for the header then I could give you the css needed to make it display on the mobile site only.

    Ben

    #136139

    bassirilaw
    Member
    Original poster

    Hi Ben – another image should work. What size will work best? thx

    #136151

    binarymoon
    Theme Author

    I would say your image stops being fully readable at around 600px wide, and I would make it taller to fit all the info in, so I’d go for 600 x 200.

    Keep in mind that some phones will show it smaller than this so a larger font size would be useful to ensure it can always be read. As a guide, an iPhone 5 has a width of 320px, so if it can be read at half size then it should always be readable.

    #136163

    bassirilaw
    Member
    Original poster

    Ben – I created an image to test. What’s next? thx

    #136204

    binarymoon
    Theme Author

    Hey Mike

    So what we need to do is upload the image and get the image url. You can do this through the media library.

    Then you can use the following css to replace the header image for any width less than 600 pixels.

    Note that I have a test image here http://lorempixel.com/600/200 – you would replace that with your own image url.

    @media only screen and (max-width: 600px) {
    #header-image img {
    content: url(http://lorempixel.com/600/200);
    }
    }

    Hopefully that will do everything you need.

    #136209

    bassirilaw
    Member
    Original poster

    Perfect! thank you.

    #136227

    binarymoon
    Theme Author

    No problem – looks great! :)

The topic ‘Mobile Customization’ is closed to new replies.