Logo left align in mobile
Hi there,
To left align the logo for mobile I tried the following code:
@media only screen and (max-width: 767px) {
#Top_bar .logo { text-align: left !important; }
}
But it did not move completely left. There is still some space left.
I did select the function “Remove Left margin” under Global -) Logo -) Advanced -) Advanced.
Please advice.
Thanks
Comments
Hi,
Please always attach a link to your website so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co
thanks
Please find Screenshot attached. Link: http://sifr.it/sifr_new/
Please, try to also use the following Custom CSS Code in your media queries.
@media only screen and (max-width: 767px) { #logo{ margin: 10px 0!important; } }Thanks
Thank you but it should be aligned with the rest of the content – please see attached. The logo should start where the pink line is. Thank you!
It won't be always equal to this line, because the the content is in the grid while the header is not.
It was not created for that purpose, so it will be really hard to make it without CSS code.
You would have to create a lot of CSS code or JS script which will make your header content width always the same as actual width of the content.
But, if you want to try adjust the most simple CSS, try this code, the second (30px) value - it pushes the logo to the right.
@media only screen and (max-width: 767px) { .logo-no-margin #Top_bar .logo #logo{ margin: 10px 30px!important; } }Thanks
Thank you Pablo!