Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #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
    Franz

    #1448587

    Hey 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,
    Ismael

    #1448594

    Thank you Ismael for the feedback

    I have tried that
    can’t do it

    I 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 displayed

    On 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

    #1448690

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

    #1448697

    Hello 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
    Franz

    #1448703

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

    #1448705

    Hey 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 mass

    so on all sides
    width: 60px;
    max-width: 60px;

    thanks
    kind regards
    Franz

    #1448708

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

    #1448717

    Hello Mike
    yes that’s what I mean thanks
    but in the horizontal view on the cell phone is still the wide overlapping logo

    can you adjust that too

    thanks and
    kind regards
    Franz

    #1448721

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

    #1448725

    Hello 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 vertical

    i hope it fits now

    thank you and kind regards
    Franz

    #1448729

    Hi,
    I’m not seeing this, the blue area is the size of the image and link:
    Enfold Support 6059

    Best regards,
    Mike

    #1448730

    Hi,
    Try this css:

    @media only screen and (max-width: 767px) { 
    #top #header_main .logo {
    	width: 60px;
    	max-width: 60px;
    }
    }

    Best regards,
    Mike

    #1448732

    Super Mike
    thanks for your patience

    now I just have to figure out the Revolution slider because of the z-index

    you can close this request
    thanks for the great support

    best regards
    Franz

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘logo mobile too wide’ is closed to new replies.