I am trying to improve the look of my mobile site. My hero image does not stay central on mobile. The bed image is pushed over to the left. Can this be set to always be centralised? Also, on the customised view, the font is lined up with the logo nicely, however, when I look live on my phone, the copy is central but the logo is pushed over to the left because of the navigation. Can the logo position be set to stay central?
Thank you. I seem to have fixed the problem on mobile and it looks a lot better, thank you. However, it seems to have created an issue with the white logo on the homepage which I think may have something to do with the new CSS. Could you advise? Thank you.
Hi there,
I am trying to improve the look of my mobile site. My hero image does not stay central on mobile. The bed image is pushed over to the left. Can this be set to always be centralised? Also, on the customised view, the font is lined up with the logo nicely, however, when I look live on my phone, the copy is central but the logo is pushed over to the left because of the navigation. Can the logo position be set to stay central?
Thank you
Rachael
Hi Rachel,
1) I'd recommend to edit the image in Photoshop to make sure that it is properly centered. Here's what it's like:
And here is how it should be:
2) You need to add some custom CSS. For example:
@media screen and (max-width: 768px) {
.site-header .site-branding {
position: absolute;
display: inline-block;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
}
And set the logo width at 210px.
Cheers, P.
Thank you. I seem to have fixed the problem on mobile and it looks a lot better, thank you. However, it seems to have created an issue with the white logo on the homepage which I think may have something to do with the new CSS. Could you advise? Thank you.
No it doesn't, your image is stretched.