Premium Theme Support › Themes by bavotasan.com › Arcade

Photos not responsive on inside pages

  • Author
    Posts
  • #131724
    bnjewell
    Member

    Hi,

    I’m trying to change some of my interior pages so that the header image is much smaller (400px tall at most), but still full-width. I’ve hacked around in the CSS enough that it works (sort of), but the responsiveness of the header photo doesn’t seem right. It jerks back and forth a lot as you resize the browser window, and the header doesn’t show up at all on some phones. Here’s the page in question:

    Ask A Question

    Any ideas?

    Thanks,
    Brian

    The blog I need help with is: (visible only to logged in users)

    #131727
    bandicootmarketing
    Theme Author

    Hi Brian – thanks for reaching out.

    1. The “jerking back and forth” that you mentioned is usually caused by the fact that when you re-size a browser window, at times your browser window is in-between what we call “break points.” The break points are usually destop, tablet, mobile. It’s basically 3 different sizes that things get resized to when the media query is called on load on a device. Shrinking a browser window is not behavior that a normal person would engage in, so as long as the image displays correctly at each break point (so on a tablet, and then on a mobile phone), that’s all we can guarantee for the most part.

    2. Can you please let us know which specific mobile phones you are having problems displaying your image on? Also, can you please include a copy of all of the custom CSS you have written to make changes yourself?

    Cheers,

    #131728
    bnjewell
    Member
    Original poster

    It doesn’t look right in Safari on my iPhone 5s (yeah, I know that’s old and small). Also, it doesn’t look right on WordPress’ preview tool when that is in mobile mode.

    Here’s the CSS:

    article {border-bottom: none;}

    #site-logo {

    margin-right: 50%;
    margin-top: 10%;
    }

    .only-on-home.no-fittext #site-description{
    visibility:hidden
    }

    .page-id-1825 #site-description{
    visibility:hidden
    }

    #site-description{
    font-family: Oswald;
    color: #FFF;
    font-size: 25px;
    align-content: space-around;
    margin-left: 70%;
    margin-right: 5%;
    margin-bottom: 5%;
    text-shadow: 0 0 40px #000;
    }


    @media     screen and (min-width: 960px) {
    #site-description {
    font-size: 40px;
    line-height: 120%;
    font-family: Oswald;
    color: #FFF;
    align-content: space-around;
    margin-left: 70%;
    margin-right: 5%;
    margin-bottom: 5%;
    text-shadow: 0 0 40px #000;
    }

    }

    .entry-title {

    display: none;
    }

    .only-on-home #more-site {

    visibility: hidden;
    }

    .page-id-1825 #header{
    max-width: 100%;
    height: auto;
    }

    .page-id-1825 div.title-card-wrapper{
    max-width: 100%;
    max-height: 400;
    }

    .page-id-1825 div.title-card{
    max-width: 100%;
    max-height: 400;
    }

    .page-id-1825 img.header-img{
    max-width: 100%;
    height: auto;
    }


    @media     screen and (max-width: 960px) {
    .page-id-1825 img.header-img {
    margin-top: 65px;
    }
    }

    .page-id-1825 #site-logo {
    display: none;
    }

    #131912
    bnjewell
    Member
    Original poster

    Just following up on this — any ideas?

  • The topic ‘Photos not responsive on inside pages’ is closed to new replies.