![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
December 12, 2023 at 2:11 pm #1427862
Hi everyone,
I hope you can help me fix this problem with my website: On Desktop and mobile everything is perfectly fine and just the way I want it to be.
Screenshot DesktopBut on the iPad it looks like this:
Screenshot iPadI’ve already tried different things, such as position and custom margins, but nothing seem to work.
Cause when it looks good on tablet it looks shitty on desktop again.
It seems to me that the promoboxes are the problem, but i can’t adjust them only for tablet, since tablet size is the same as desktop.I hope you get the problem and have a solution for me
Thank you :)
-
This topic was modified 9 months ago by
northorie.
December 13, 2023 at 2:29 am #1427931Hi northorie,
Can you try adding this CSS code in Enfold > General Styling > Quick CSS:
@media only screen and (min-width:768px) and (max-width:1180px) { #top #main .av-lpvadf1r-9094a82807ca6b00b3712e5ee699c058 > .flex_column { top: auto; bottom: -126px; } }
Best regards,
NikkoDecember 13, 2023 at 11:22 am #1427976Thanks for your reply.
It doesn’t help.
I guess it would be best if my three text boxes would fold to a certain height on tablet.
But how can I achieve this?December 13, 2023 at 11:31 am #1427977Or is it possible to drop my rotating Headline a little lower on ipda mode? How?
December 14, 2023 at 3:31 am #1428043Hi northorie,
You can simply add this code inside the previous code I gave:
#top #service .av-rotator-container { margin-top: 80px; }
The whole code would look like this:
@media only screen and (min-width:768px) and (max-width:1180px) { #top #main .av-lpvadf1r-9094a82807ca6b00b3712e5ee699c058 > .flex_column { top: auto; bottom: -126px; } #top #service .av-rotator-container { margin-top: 80px; } }
Just change the values as you see fit. (The previous margin was 55px).
Hope it helps.Best regards,
NikkoDecember 14, 2023 at 1:29 pm #1428092It helped, thanks a lot.
But it didn’t work the way you posted it. I’ve done it wrong at first an posted the new code above the previous one.Now the Code looks like that:
#top #service .av-rotator-container { margin-top: 95px; } @media only screen and (min-width:768px) and (max-width:1180px) { #top #main .av-lpvadf1r-9094a82807ca6b00b3712e5ee699c058 > .flex_column { top: auto; bottom: -126px; } }
It’s not perfect, but as close as I can get I guess.
I just noticed that it looks strange on iPhone now… *sad*
December 15, 2023 at 1:07 am #1428168Hi northorie,
Try to reduce the margin on iphones (or mobile device):
@media only screen and (max-width:767px) { #top #service .av-rotator-container { margin-top: 30px; } }
Hope it helps.
Best regards,
NikkoDecember 16, 2023 at 11:57 am #1428258Thanks, but didn’t work :(
I found a solution I can live with.
I put the rotating headline outside of the color section and this way I could ajust the magin to the way it looks now and i’m fine with thatDecember 16, 2023 at 1:49 pm #1428264Hi,
Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
This topic was modified 9 months ago by
-
AuthorPosts
- The topic ‘Rotating Headline and Promoboxes’ is closed to new replies.