-
AuthorPosts
-
June 6, 2024 at 7:28 pm #1448561
Hello everyone
I have here on this page link below:I have added a new slider
The link works great on the PC.
On the phone the logo overlaps the new slider
and so the link jumps back to the home page
can you do something here
thanks
Kind regards
FranzJune 7, 2024 at 5:17 am #1448587Hey schweg33,
Thank you for the inquiry.
Have you tried adding another slider specifically created for mobile view? Try creating a taller slider and aligning the button at the bottom instead of the middle. You should be able to toggle the visibility of the sliders on different screen sizes in the settings panel.
Best regards,
IsmaelJune 7, 2024 at 6:18 am #1448594Thank you Ismael for the feedback
I have tried that
can’t do itI think the reason is when I hover the mouse over “Photos and Videos” on the mobile device
“Fotos und Videos” the link https://dorfgeschichte.li/ is displayedOn the PC this link https://archiv.dorfgeschichte.li/ is displayed on mouse over.
On mobile the logo (circle) seems wider and overlaps the revolution slider.
Can you look at this again.
Thanks in advance
kind regards
Francis
June 8, 2024 at 5:24 pm #1448690Hi,
To make the logo link smaller for mobile try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:@media only screen and (max-width: 480px) { #top.page-id-11754 #header_main .logo { width: 60px; max-width: 60px; } }
but it also looks like you will need to make the button in the slider come to the fore ground with z-index, try around 99
I have not used the revolution sliderI’m not sure where this setting is, perhaps you do, or try checking the revolution slider documentation.Best regards,
MikeJune 8, 2024 at 10:30 pm #1448697Hello Mike
Thanks for your feedback.
So that the logo is also displayed vertically in the same width,
how do I have to set this?Thank you
best regards
FranzJune 9, 2024 at 3:12 am #1448703Hi,
Right now vertically your logo is 80px but this is the same as your menu so they are both is line with each other, if you change the height they will not be in line with each other.
Is this what you are asking?
Your slider height is 97px, but the header height is 80px, so I’m thinking that your slider should be adjusted to match your header instead of being larger.Best regards,
MikeJune 9, 2024 at 7:17 am #1448705Hey Mike
thanks for your feedback
no i mean that the width of the logo is the same on all sides
horizontally and vertically
so over all this massso on all sides
width: 60px;
max-width: 60px;thanks
kind regards
FranzJune 9, 2024 at 1:10 pm #1448708Hi,
Do you mean on all pages for mobile?@media only screen and (max-width: 480px) { #top #header_main .logo { width: 60px; max-width: 60px; } }
Best regards,
MikeJune 9, 2024 at 3:45 pm #1448717Hello Mike
yes that’s what I mean thanks
but in the horizontal view on the cell phone is still the wide overlapping logocan you adjust that too
thanks and
kind regards
FranzJune 9, 2024 at 5:17 pm #1448721Hi,
When I check in portrait view the logo and link is not overlapping, the slider seems to behind the inner-container div that holds the logo & menu, so you need to bring the slider button to the top with z-index, as pointed out above, not the whole slider as then you won’t be able to click the menu button.
unfortunately tring to override the slider z-index is not working like this:#slider-88-slide-165-layer-1 { z-index: 999 !important; }
so you need to set this inside on the slider options.
I have not used the revolution sliderI’m not sure where this setting is, perhaps you do, or try checking the revolution slider documentation.Best regards,
MikeJune 9, 2024 at 6:35 pm #1448725Hello Mike
Sorry
Probably my English is very bad
I have now tried to display it in a printscreen:
Link below:in the horizontal mobile view the logo is still wide
and overlaps “Archiv Fotos und Videos”
the width should be the same as verticali hope it fits now
thank you and kind regards
FranzJune 9, 2024 at 7:10 pm #1448729June 9, 2024 at 7:13 pm #1448730Hi,
Try this css:@media only screen and (max-width: 767px) { #top #header_main .logo { width: 60px; max-width: 60px; } }
Best regards,
MikeJune 9, 2024 at 7:25 pm #1448732Super Mike
thanks for your patiencenow I just have to figure out the Revolution slider because of the z-index
you can close this request
thanks for the great supportbest regards
Franz -
AuthorPosts
- The topic ‘logo mobile too wide’ is closed to new replies.