Hello!
I am currently having an issue with the Helix template: while I can adjust the logo size for smartphones using custom CSS, the top of the logo gets cut off.
What can I do?
Many thanks!
Regards,
sven
Staff replied
Helix Framework
Logo cut off at the top on smartphone
16 replies
Mehtaz Afsana Borsha Staff
Hi,
Thanks for contacting us. Could you please give me your site URL and also a screenshot of your issue?
-Regards.
Sven Engelke Asked this
Hello!
I just managed to get it working on my phone.
Now I'm having trouble with landscape mode and tablets.
The logo ends up being tiny. I'm stuck there.
See hidden Content for URL etc.
Thank you.
Regards, sven
Mehtaz Afsana Borsha Staff
Hi,
Could you please check your site URL? I cant access on that.
Sven Engelke Asked this
Hello,
Please accept my apologies.
There was a typo in the URL.
I have posted the correct URL in the protected area.
Many thanks!
Regards,
Sven
Mehtaz Afsana Borsha Staff
Hi,
Use this CSS in your custom.css file
@media (max-width: 992px) {
.logo-image {
height: 250px !important;
}
}
Sven Engelke Asked this
Hello!
I implemented it, but unfortunately, it isn't working.
Everything is fine on the smartphone and the PC.
It's causing problems on the tablet.
Regards,
Sven
Mehtaz Afsana Borsha Staff
Hi
Please use this CSS in your custom.css file
.logo-image-phone {
height: 250px !important;
}You have used this CSS and set height 30px that's why it shows small. Please remove that CSS and make it 250px.
Sven Engelke Asked this
Hello,
That isn't in the custom CSS at all.
The following is in the custom CSS:
#sp-header {
background: rgba (0,0,0,0);
}
#sp-header {
position: absolute;
}
#sp-header.header-sticky{
background: white;
}
.burger-icon > span {
background-color: #ffffff !important;
}
.offcanvas-menu .offcanvas-inner ul.menu > li a,
.offcanvas-menu .offcanvas-inner ul.menu > li span {
color: #ffffff;
}
@media (max-width: 767px) {
#sp-header, .burger-menu {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.logo-image {
max-height: 100% !important;
object-fit: contain;
}
}
@media (max-width: 991px) and (orientation: landscape) {
.logo-image img, .sp-default-logo {
height:400px !important; /* Erhöhe diesen Wert, bis die Größe passt */
max-height: 200px !important;
width: auto !important;
}
#sp-header {
height: auto !important; /* Verhindert, dass das größere Logo wieder abschneidet */
}
}Regards, sven
Mehtaz Afsana Borsha Staff
Ok, But now please use this CSS in your main CSS file
.logo-image-phone {
height: 250px !important;
}
Mehtaz Afsana Borsha Staff
Hi,
Is this helped?
Sven Engelke Asked this
Hello,
which main CSS file is it?
Surely I should be able to control this via the Helix template.
I don't usually write CSS by hand, as I'm not very familiar with it.
Where is the main CSS file located?
I'm afraid I can't make any progress this way.
Many thanks!
Regards, sven
Ziaul Kabir Staff
Hello Sven,
Please accept my sincere apologies for the delayed response.
Could you please provide me with Super Administrator access using the shared test user? This will allow me to investigate the issue more thoroughly and verify why the custom CSS is not affecting your site as expected.
Thank you for your cooperation.
Best regards,
Sven Engelke Asked this
Hello,
the user joomshaper is now a Super Admin.
Regards,
Sven
Ziaul Kabir Staff
Please, check and let me know, If the issues is resolved.
Thanks,
Sven Engelke Asked this
Hello,
@Ziaul Kabir:
Many thanks for your effort.
It's working perfectly now.
What exactly did you do?
Regards,
sven
Ziaul Kabir Staff
It’s great to hear that your issue has been resolved.
I created an override custom CSS file here:
/templates/shaper_helixultimate/css/custom.css
Then I added a small CSS rule there to make the required changes.
If everything is working fine now, please mark the question as complete by accepting any of our answers.
Thanks!
Log in to reply.