Tagged: 

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • January 4, 2022 at 2:03 pm #1334200
    triaderm

    Hello!
    When viewing the default homepage on a mobile (medical theme), you see that the main blocks (flex_column_table?) are “to high” they mask the buttons “learn more” and “make appointment”. Also the header photo is kind a small (height) and the sentence (welcome to enfold) are to big.

    1.) How to lower the 3 blocks for mobile view? (on desktop they’re fine).
    2.) How to change the header photo that it looks proportional on mobile devices?
    3.) How to resize the text for mobile?

    It would be great if i can do this just in this theme, without the of revolution slider or other third party plugins.

    Many thanks in advance.

    January 5, 2022 at 1:10 pm #1334355
    triaderm

    When do you expect to look at my questions above?

    Thanks!

    January 5, 2022 at 1:31 pm #1334366
    Yigit

    Hey,

    Thanks for contacting us!

    1- Please edit your Color Section element that contains your 3 blocks and go to Advanced > Developer Settings and give it a custom ID (“my-custom-id” in example below) and then add following code to bottom of Quick CSS field in Enfold theme options > General Styling 

    @media only screen and (max-width: 990px) { 
#top #my-custom-id .flex_column_table {
  margin-top: 0;
}}

    2- You can duplicate your Slider element, choose to display different slide image in your duplicated slider and then edit your element and go to Advanced > Responsive and choose to hide duplicated slider on desktop and choose to hide your existing slider on mobile.

    3- You can edit your slide and go to Styling > Font Sizes and choose different font sizes for different screen sizes – https://imgur.com/a/XbHsUlM :)

    Best regards,
    Yigit

    January 5, 2022 at 3:57 pm #1334388
    triaderm

    Wow Yigit, thank you very much. Spot on.
    All points work, i have create a second slide for mobile, disable it as you describe but: can you help me with:

    1.) text-aligning the “Welkom bij….” sentence. It is now 13px on mobile but i want to have it right aligned and split it in two lines. ONe line is to long.
    2.) the “make appointment” button (MAAK AFSPRAAK in Dutch) is way to big on the iPhone, can we resize this?

    Thanks! Reinout

    January 5, 2022 at 4:11 pm #1334390
    triaderm

    Found a solution for point 1. I could just insert html code in this field. Great.

    Now only point 2, making the butoon smaller incl. the font-size.

    Thanks!

    January 5, 2022 at 6:40 pm #1334403
    Yigit

    Hi,

    Have you found a solution for point 2 as well? Font size is 12px and it looks fine on my end, I attached a screenshot in private content field.

    If you would like to decrease the size even more, please add following code to bottom of Quick CSS field in Enfold theme options > General Styling tab

    #top #full_slider_2 .avia-slideshow-button {
  font-size: 10px !important;
}

    Best regards,
    Yigit

    January 5, 2022 at 8:19 pm #1334418
    triaderm

    Hi!
    Yes, i figured it out, thanks. But the remaning point is:

    1.) how to get (align) the button to the right? It’s now aligned left but i must be placed under the white H1 text at the right.

    Many thanks again.

    Best regards, Reinout

    January 5, 2022 at 8:21 pm #1334419
    triaderm

    ow, and (if possibe) i don’t want the white border and it would be nice if i could place the button a little higher.

    Reinout

    January 5, 2022 at 8:25 pm #1334420
    triaderm

    ah, border: none !important; works fine!

    Now only the position is left:-)

    January 5, 2022 at 8:34 pm #1334421
    Yigit

    Hi,

    Please add following code to bottom of Quick CSS field

    #top #full_slider_2 .avia-slideshow-button {
  float: right; 
}

    :)

    Best regards,
    Yigit

    January 5, 2022 at 8:38 pm #1334425
    triaderm

    Yes! that will do the trick, but how i get it a little more up? Somehting with margin-top or padding?
    Now it’s to close to the border, i like it to have it in the middle, between the tekst and the bottom of the slide.

    January 5, 2022 at 8:45 pm #1334426
    Yigit

    Hi,

    Yes, you can use the previous code as following instead

    #top #full_slider_2 .avia-slideshow-button {
  float: right; 
  margin-top: 0 !important;
}

    If you need to adjust further, you can add following code as well

    #top #full_slider_2 .avia-caption-title + br {
  display: none;
}

    Best regards,
    Yigit

    January 5, 2022 at 8:48 pm #1334427
    triaderm

    ah, found it! “top: Xpx”
    Thanks Yigit. You can close this one.

    January 5, 2022 at 8:51 pm #1334428
    triaderm

    Ah, our remarks where placed the same time.
    Just one question in the same context: if i turn my iphone landscape i loose the text and buttons.
    Do i need to copy-paste the CSS code and then add a different “@media only screen” resolution for a landscape phone and/or iPad?

    January 5, 2022 at 9:56 pm #1334435
    Yigit

    Hi,

    I could reproduce the issue. Refreshing the page helps however that should not be necessary.

    Could you please try disabling JS file merging and compression in Enfold theme options > Performance and check if that helps?

    Best regards,
    Yigit

    January 6, 2022 at 12:04 pm #1334509
    triaderm

    Hi Yigit,

    I have tried that, but unfortunately no results yet.
    It is currently still disabled. Should i leave it this way in steps to the next (possible) solution?

    Refreshing the page indeed works, but as you said, this is not how it should worlk. I hope you can find something else.
    Thanks again.

    Best regards,
    Reinout

    January 7, 2022 at 6:08 am #1334645
    Ismael

    Hi,

    Thank you for the update.

    You might want to consider displaying another type of slider or element in place of the current one on mobile view. A Fullscreen Slider element for example will provide more space for the content. You just need to toggle the elements’ Advanced > Responsive Settings > Element Visibility to control their visibility on different screen sizes or devices. So what will happen is that you will have two sliders in the page, one that will display on desktop or larger screens and another for mobile view.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • You must be logged in to reply to this topic.