Left align Header Image

  • jbocreative

    (@jbocreative)


    8 years, 2 months ago

    Hi

    I am trying to have a better experience with narrow mobiles screens

    I could allready move site branding like

    • Right on large screens
    • bottom on narrow screens

    with the code

    
@media screen and (min-width: 48em) {
    .custom-logo-link {
        padding-right: 1em;
        }
    .has-header-image.twentyseventeen-front-page .site-branding,
    .has-header-video.twentyseventeen-front-page .site-branding,
    .has-header-image.home.blog .site-branding,
    .has-header-video.home.blog .site-branding {
        left: 50%;
        padding-bottom: 10em;
        width: 50%;
        }
    }

    Now I would like the header image image to be left aligned to keep my face visible when the screen goes narrow.

    Has to do with .has-header-image .custom-header-media img but I can’t find…
    Can you please help ?

    • This topic was modified 8 years, 2 months ago by Andrew Nevins.

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 2 months ago

    In the “Additional CSS” section of the dashboard add this:

    

.custom-logo-link {
  padding-right: 1em;
}

.has-header-image.twentyseventeen-front-page .site-branding,
.has-header-video.twentyseventeen-front-page .site-branding,
.has-header-image.home.blog .site-branding,
.has-header-video.home.blog .site-branding {
    left: 50%;
    padding-bottom: 10em;
    width: 50%;
}

@media screen and (max-width: 768px) {

    .has-header-image.twentyseventeen-front-page .site-branding,
    .has-header-video.twentyseventeen-front-page .site-branding,
    .has-header-image.home.blog .site-branding,
    .has-header-video.home.blog .site-branding {
        left: 40%;
        padding-bottom: 10em;
        width: 50%;
    }
}

.site-branding .wrap {
    max-width: 1000px;
    padding-left: 3em;
    padding-right: 3em;
}

.has-header-image.twentyseventeen-front-page .site-branding, 
.has-header-video.twentyseventeen-front-page .site-branding, 
.has-header-image.home.blog .site-branding,
.has-header-video.home.blog .site-branding {
    display: block;
}

    https://codex.wordpress.org/CSS#Custom_CSS_in_WordPress

    Thread Starter jbocreative

    (@jbocreative)

    8 years, 2 months ago

    Hi Andrew

    I think my question was not clear.

    If you open my website in full wide screen then draw the browser right edge to the left to have a narrow windows then the header picture goes to left also. Must be somehow horizontally centered.

    In this case, I want the image not moving to the left, like it was left aligned.

    Hope it is clearer 🙂

    Reards

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 2 months ago

    I’m still not sure I understand. Your focal point in the image is to the left, the theme doesn’t put it there on mobile: http://www.jbocreative.fr/wp-content/uploads/2017/06/JBo_Header_2017_05_24-1024×614.jpg

    It’s just that on desktop there’s more space to fill so the header image stretches in size.

    Thread Starter jbocreative

    (@jbocreative)

    8 years, 2 months ago

    Hi
    Here is an image : Web17HeaderImageAlignment_2018.png (updated)
    It should help.
    Regards

    • This reply was modified 8 years, 2 months ago by jbocreative.
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 2 months ago

    Which device, browser & browser version are you seeing this in?

    Thread Starter jbocreative

    (@jbocreative)

    8 years, 2 months ago

    FF57.0.4 on Android 7.0 but Win10 does the same

    Web17HeaderImageAlignment_2018.png

    (Twenty Seventeen Version: 1.3)

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 2 months ago

    It seems to happen if you have a tall and narrow device. Is your audience using such a device? If not is it worth investing time into this?

    Thread Starter jbocreative

    (@jbocreative)

    8 years, 2 months ago

    tall and narrow device

    … strange… you mean like a mobile phone? 🙂
    Well since mobile usage has exceeded desktops since a few time, I think it is worth I keep trying.
    I’d appreciate any tip for this.
    Regards

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 2 months ago

    My point was to make sure you’re not emulating an issue that doesn’t exist in the real world. Sometimes people do that when they’re resizing a browser.

    I should also point out the theme wasn’t built for focal points in the image and the solution will be tailored for particular image that you’ve uploaded.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 2 months ago

    In the “Additional CSS” section of the dashboard add this:

    
@media screen and (max-width: 520px) {
    .has-header-image .custom-header-media img {
        width: auto;
        position: absolute;
    }
}

    https://codex.wordpress.org/CSS#Custom_CSS_in_WordPress

    This will move the image as far right as it can be, the rest is down to the focal point in the image itself.

    • This reply was modified 8 years, 2 months ago by Andrew Nevins.
Viewing 10 replies - 1 through 10 (of 10 total)

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