Title: Left align Header Image Last modified: January 26, 2018 --- # Left align Header Image * [jbocreative](https://wordpress.org/support/users/jbocreative/) * (@jbocreative) * [8 years, 2 months ago](https://wordpress.org/support/topic/left-align-header-image/) * 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](https://wordpress.org/support/users/anevins/). * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fleft-align-header-image%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 10 replies - 1 through 10 (of 10 total) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [8 years, 2 months ago](https://wordpress.org/support/topic/left-align-header-image/#post-9905959) * 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](https://codex.wordpress.org/CSS#Custom_CSS_in_WordPress)_ * Thread Starter [jbocreative](https://wordpress.org/support/users/jbocreative/) * (@jbocreative) * [8 years, 2 months ago](https://wordpress.org/support/topic/left-align-header-image/#post-9906022) * 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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [8 years, 2 months ago](https://wordpress.org/support/topic/left-align-header-image/#post-9906127) * 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](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](https://wordpress.org/support/users/jbocreative/) * (@jbocreative) * [8 years, 2 months ago](https://wordpress.org/support/topic/left-align-header-image/#post-9906313) * Hi Here is an image : [Web17HeaderImageAlignment_2018.png](https://www.sugarsync.com/pf/D7464562_820_488541819)( updated) It should help. Regards - This reply was modified 8 years, 2 months ago by [jbocreative](https://wordpress.org/support/users/jbocreative/). * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [8 years, 2 months ago](https://wordpress.org/support/topic/left-align-header-image/#post-9906357) * Which device, browser & browser version are you seeing this in? * Thread Starter [jbocreative](https://wordpress.org/support/users/jbocreative/) * (@jbocreative) * [8 years, 2 months ago](https://wordpress.org/support/topic/left-align-header-image/#post-9906470) * FF57.0.4 on Android 7.0 but Win10 does the same * [Web17HeaderImageAlignment_2018.png](https://www.sugarsync.com/pf/D7464562_820_488541819?_ga=2.222855327.564635082.1516979658-247153336.1511772914) * (Twenty Seventeen Version: 1.3) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [8 years, 2 months ago](https://wordpress.org/support/topic/left-align-header-image/#post-9906483) * 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](https://wordpress.org/support/users/jbocreative/) * (@jbocreative) * [8 years, 2 months ago](https://wordpress.org/support/topic/left-align-header-image/#post-9906580) * > 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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [8 years, 2 months ago](https://wordpress.org/support/topic/left-align-header-image/#post-9906637) * 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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [8 years, 2 months ago](https://wordpress.org/support/topic/left-align-header-image/#post-9906679) * 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](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](https://wordpress.org/support/users/anevins/). Viewing 10 replies - 1 through 10 (of 10 total) The topic ‘Left align Header Image’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/twentyseventeen/4.0/screenshot. png) * Twenty Seventeen * [Support Threads](https://wordpress.org/support/theme/twentyseventeen/) * [Active Topics](https://wordpress.org/support/theme/twentyseventeen/active/) * [Unresolved Topics](https://wordpress.org/support/theme/twentyseventeen/unresolved/) * [Reviews](https://wordpress.org/support/theme/twentyseventeen/reviews/) * 10 replies * 2 participants * Last reply from: [Andrew Nevins](https://wordpress.org/support/users/anevins/) * Last activity: [8 years, 2 months ago](https://wordpress.org/support/topic/left-align-header-image/#post-9906679) * Status: not resolved