Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • December 12, 2023 at 2:11 pm #1427862
    northorie

    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 Desktop

    But on the iPad it looks like this:
    Screenshot iPad

    I’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 11 months, 1 week ago by northorie.
    December 13, 2023 at 2:29 am #1427931
    Nikko

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

    December 13, 2023 at 11:22 am #1427976
    northorie

    Thanks 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 #1427977
    northorie

    Or is it possible to drop my rotating Headline a little lower on ipda mode? How?

    December 14, 2023 at 3:31 am #1428043
    Nikko

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

    December 14, 2023 at 1:29 pm #1428092
    northorie

    It 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 #1428168
    Nikko

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

    December 16, 2023 at 11:57 am #1428258
    northorie

    Thanks, 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 that

    December 16, 2023 at 1:49 pm #1428264
    Mike

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

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Rotating Headline and Promoboxes’ is closed to new replies.