adjust only one portfolio header photo on mobile to not be centered

  • Author
    Posts
  • #129046

    colleenswat
    Member
    Original poster

    How can I adjust my header photo only on mobile to not be centered for one portfolio page? I added in a media query with the page ID and can’t see to get it to work for just the one mobile page.

    the page I need help with is https://colleenswat.com/portfolio/sdsu-center-for-autism/

    When I switch to mobile the text on my photo gets cut off. I think instead of center center, it would look better as left top?

    Thanks

    The blog I need help with is: colleenswat.com

    #129146

    tarasdashkevych
    Theme Author

    Hello,

    The background image in the Featured Image section uses a “cover” functionality (CSS3), meaning the browser automatically scales the image as large as possible and maintains image aspect ratio so the image does not get squished.

    The image “covers” the entire width and height of the container. When the image and container have different dimensions, the image is clipped either at the top and bottom edges, or the left and right edges.

    I would recommend you to play with a height of the header section for this specific portfolio page to find a best solution for you. For example:

    @media only screen and (max-width: 500px) {
      .postid-1170 #primary-header {
         height: 380px;
      }
    }

    Hope this helps.

    Thank you,
    Taras

    #129150

    colleenswat
    Member
    Original poster

    That work’s perfectly. Thank you so much.

    #129165

    tarasdashkevych
    Theme Author

    You are welcome :)

The topic ‘adjust only one portfolio header photo on mobile to not be centered’ is closed to new replies.