Updated Lightbox Template, How To Adjust Height On Flexbox Row
Shana
Hello, Since updating the Lightbox template, my mobile headers (on all pages but the homepage) are cutting off my logo. I see that this is because they have changed to flexboxes. How do I adjust the height on these flexboxes?
Test Page with Issue: https://hermanalunajewelry.com/hlsitecopy/index.php/about/olderworks
The issue is when viewed on mobile, the top header row height is shorter than the logo and the logo gets cut off. I have tried EVERYTHING to adjust that flex .row and can not seem to figure it out.
This did not work:
@media screen and (max-width: 1000px) and (min-width: 320px) {
#sp-mobile-logo .d-block d-md-none .container .row {
height: 165px;
}}Please help!
Atick Eashrak Shuvo
Accepted AnswerPlease add the following CSS code to your Template Options -> Custom Code -> Custom CSS
section#sp-mobile-logo {
height: 160px;
}Shana
Accepted AnswerHi there, Thank you for the quick reply. Unfortunately that code did not work. Here is a screenshot of the page on a mobile device: [https://hermanalunajewelry.com/hlsitecopy/IMG_2447.jpg]
You can see that the .row with display: flex is not changing heights and it cuts off the logo.
Please help!
Atick Eashrak Shuvo
Accepted AnswerHi there!
Thank you for bringing this to our attention, and I sincerely apologize for the inconvenience caused.
To assist you more effectively, may I kindly request temporary administrative access to your site? This will allow me to thoroughly investigate and resolve the issue for you.
Before sharing the credentials, I strongly recommend taking a complete backup of your site to ensure all data remains secure.
Looking forward to your response.
Best regards
Shana
Accepted AnswerThanks for your help!
So I have my orignal site with the old version of Lightbox here (this layout works fine so you can see what the header with logo on mobile should look like, please don't edit it): https://hermanalunajewelry.com/index.php/olderworks
And I have my working site here to edit (this site has the newest Lightbox template version and the headers on each page, aside from homepage, are cutting off the logo when viewed in mobile, like I showed you in the screenshot): https://hermanalunajewelry.com/hlsitecopy/index.php/shop/shoponline
Just a note: My homepage uses one copy of the template, and my pages uses another copy of the template.
Shana
Accepted AnswerHi, the header still looks the same on mobile with the logo cut off. The height did not change on mobile. :( :(
It does seem that it is fixed on tablet! But now how can we fix on mobile?
Also, what code are you using so that I can take note.
Atick Eashrak Shuvo
Accepted AnswerPlease clear your browser cache and check. Looking perfect from my side.
Shana
Accepted AnswerOh I'm so sorry about that– you are right! Thank you! Please tell me what code you used to fix the height.
Thank you!!