Responsive Header Image

  • Resolved irinanour

    (@irinanour)


    9 years, 4 months ago

    Can anyone help me please with making the header image responsive on iPhone and iPad?

    The header image is responsive by default but it doesn’t work properly and shrinks/flattens my image. To bypass that I have added this style to CSS

    .site-header {
    height:630px;

    }
    But now the header image stopped being responsive…:(
    Any idea how to fix this?
    Thanks!
    Regards, Irina

    • This topic was modified 9 years, 4 months ago by irinanour.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Code Parrots

    (@codeparrots)

    9 years, 4 months ago

    • This reply was modified 9 years, 4 months ago by Code Parrots.
    Evan Herman

    (@eherman24)

    9 years, 4 months ago

    Hey @irinanour,

    The header image in Primer should be responsive out of the box. Do you have a link to your site so we can possibly investigate further?

    Thanks!
    Evan

    Thread Starter irinanour

    (@irinanour)

    9 years, 4 months ago

    Hello Evan,
    Thanks for the reply! Very much appreciated!

    Yes, the header image is responsive by default but it doesn’t work properly and shrinks/flattens my image. To bypass that I have added this style to CSS

    .site-header {
    height:630px;

    }
    But now the header image stopped being responsive…:(
    Any idea how to fix this?
    Thanks!
    Regards, Irina

    Thread Starter irinanour

    (@irinanour)

    9 years, 4 months ago

    Here is the site
    http://skiphireslough.ltd
    thanks

    Evan Herman

    (@eherman24)

    9 years, 4 months ago

    Hi @irinanour,

    If you specify a hard px value for the height, the container would no longer be responsive. The image tries to scale down while maintaining the current aspect ratio, but when you set a height the image width will only scale down.

    You would need to create custom breakpoints in your theme to set the height of the header in px when certain widths are reached.

    It’s probably easier if you remove the company name/site logo and the contact info out of the image and add them as actual HTML elements on the page, in the header. When the logo and contact info is in the header, and things scale down, you’re not going to be able to read things properly. Having them as actual HTML elements on the page will help workaround that limitation.

    Thread Starter irinanour

    (@irinanour)

    9 years, 3 months ago

    Evan, Hi!
    Thanks a lot for the advice I have implemented it and it totally works 🙂
    On another note I have call to action rows with phone number buttons inside them I want to make them clickable on mobiles so they initiate a phone call and the usual html code does not seem to work on them…unless I put the code into the general write up area, which falls outside the pretty button…Any idea how I make the button to call on touch?

    020 7736 0355

    Thanks a lot for your advice 🙂
    Irina
    http://skiphireslough.ltd

    Thread Starter irinanour

    (@irinanour)

    9 years, 3 months ago

    ups..

    
020 7736 0355
    • This reply was modified 9 years, 3 months ago by irinanour.
    • This reply was modified 9 years, 3 months ago by irinanour.
    • This reply was modified 9 years, 3 months ago by irinanour.
    • This reply was modified 9 years, 3 months ago by irinanour.
    • This reply was modified 9 years, 3 months ago by irinanour.
    • This reply was modified 9 years, 3 months ago by irinanour.
Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Responsive Header Image’ is closed to new replies.