Archived topic
Logo size on mobile
7 replies · Started by Patricia on February 23, 2023
Hello,
I still have two problems on the site I just made with the Java theme:
- The logo is very small on tablet and smartphone screens and I can't figure out how to make it bigger.
- My second problem is the picture at the top of the home page. I also can't get the character climbing the stairs to show up on the cell phone.
I'll put the website address at the bottom.
Thanks in advance for your help.
Patricia
Hi Patricia,
- The mobile logo height is controlled by the line height of the primary navigation menu item which is 50px in your case.
If you don't want to increase the line height of the menu item, then we can use this CSS to only change the mobile logo size:
.mobile-header-navigation .site-logo.mobile-header-logo img {
height: 80px;
}- Do you have GenerateBlocks Pro? If so, you can use the advanced background to re-position the background image for mobile, set the background position to 70% center.
If you don't have GB pro, then try adding this CSS:
@media(max-width: 768px) {
.gb-container-b8cfbc6e:before {
background-position: 70% center;
}
}Hello Ying,
Thankyou for your answer. It's perfect for the background image 🤗
But regarding the logo height, it doesn't work, unfortunately.. I have copied the CSS in the additional CSS place and nothing has changed..
Your previous CSS is missing a closing bracket which causes my CSS doesn't work :)
https://www.screencast.com/t/7bgUNTrK2s
Indeed, every detail counts in CSS! 😁
I added the bracket, but... it doesn't change anything 😕
When you paste the CSS, it seems created some format issue:
https://www.screencast.com/t/1YlWNeLxqc
Can you try removing it and pasting it again?
Bravo Yin!
Merci beaucoup 🤗
You are welcome! Glad to hear that :)