Solved Helix Framework

Updated Lightbox template, how to adjust height on flexbox row

Asked by Shana 1 year ago Last activity 1 year ago

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!

Accepted answer

Marked as the solution

Atick Eashrak Shuvo Staff

1 year ago

#sp-mobile-logo {
    height: 160px !important;
}

5 more replies

Atick Eashrak Shuvo Staff

1 year ago

Please add the following CSS code to your Template Options -> Custom Code -> Custom CSS

section#sp-mobile-logo {
    height: 160px;
}

Shana Asked this

1 year ago

Hi 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 Staff

1 year ago

Hi 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 Asked this

1 year ago

Thanks 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.

Atick Eashrak Shuvo Staff

1 year ago

Please check now

Shana Asked this

1 year ago · edited

Hi, 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 Staff

1 year ago

Please clear your browser cache and check. Looking perfect from my side.

Shana Asked this

1 year ago

Oh I'm so sorry about that– you are right! Thank you! Please tell me what code you used to fix the height.

Thank you!!

Shana Asked this

1 year ago

Thank you!!

Atick Eashrak Shuvo Staff

1 year ago

You are welcome

Shana Asked this

1 year ago

Sure! You guys are the best!

In the docs