1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Elements Not responsive

Discussion in 'Free Divi Community Forum' started by Siver, Aug 25, 2024.

  1. Siver

    Siver New Member

    Dear Community,

    Once again, I'm struggling with the design of my website. Initially, I used a full-width header, which works perfectly on a PC but isn't the best choice for mobile devices. On a PC, the full-width header is ideal, but on mobile devices, scrolling becomes jittery, and it affects the overall performance of the website. Therefore, I decided to go for a more atomic solution and created a custom header. It initially looked pretty good.

    I adjusted the elements in my section using the "Vertical" and "Horizontal" sliders. However, now I'm facing the problem that the elements on my website are not responsive and therefore do not adapt to different screen sizes.

    Now to my question:
    I would like to keep the atomic solution since it achieves better performance on mobile devices, which is important to me. However, I need to solve the problem with the responsive design. Has anyone encountered this issue before or knows how to fix it?
     
    #1 Siver, Aug 25, 2024
    1. PRO MEMBER PERKS Divi Login Customizer Plugin - Instantly beautify your Wordpress login page with 6 premade designs:Learn More
  2. Divi Booster

    Divi Booster Divi Expert

    Hey Siver,

    You have two main options here.

    1) You can create separate sections for mobile, tablet and/or desktop and then use the visibility options under "Section Settings > Advanced > Visibility" so set each section to be visible only on the device type it is intended for. So you'd make the mobile version of the section visible only on mobile, and so on.

    2) Divi includes (slightly hidden) responsive settings to give most module settings a different value on mobile / tablet / desktop. You can find the responsive settings as shown in the example in this post:

    https://divibooster.com/setting-responsive-values-for-divi-module-settings/

    I'm not 100% sure which vertical / horizontal sliders you are referring to, but if you've been dragging the boundaries of the elements in the visual builder preview, then the corresponding responsive settings can be found in the section (or row / module) settings under "Section Settings > Design > Sizing" and "Section Settings > Design > Spacing".

    Hope that helps!
     
    #2 Divi Booster, Aug 26, 2024
  3. Siver

    Siver New Member

    Hi Dan,

    thank you very much for the solutions. To the first point: To be honest, that was also my first try to fix it. I decided to turn on the visibility for the full-width header only on pc and the new one for mobile. But there are two issues: The first issue is, that the elements seems to be fixed on their points. Since even mobile Devices have different sizes, this will make problems with the kind of size of the mobile I guess. The second issue is, that I have checked the performance with pagespeed insight and it seems to make problems to have both modules, even tough only one of them is visible at a time. Is it possible, that the performance will get lower, even tough element are unsivisble?

    Thanks for the url with the settings for different divices. I am already using that option so let things look good on every device.

    To your question about vertical/horzontal:

    If you open a row, you will find a search in the top. Just put "vertical" or "horizontal" in it, and it will show you the functions to move the row as you wish. I was manually searching that, but I could not find it. Only over the search I found it.
    The reason, why I used this is, because I want to place the elements in the right place inside my section. Because if I create the new row, they appear in the middle upper spot and I wanted them to be in the middle left corner.

    If there is a better way to move the rows inside the sections, please let me know. Maybe this is the reason, why I have all the problems with the responsive design, because that vertical/horizontal isn't even a best practice.

    I have attached two screenshots showing that options.
     

    Attached Files:

    #3 Siver, Aug 26, 2024
    1. PRO MEMBER PERKS Divi Block Pro - Premade before / after image slider for your Divi site without using any plugins:View Demo
  4. Divi Booster

    Divi Booster Divi Expert

    Ah, okay, I understand. Thanks for explaining it.

    You're right, there can be performance issues with maintaining different headers for mobile / desktop, etc. The reason is that Divi has to load both in the page (in case you, for example, resize a desktop window to a narrower "mobile" width). It then just hides the relevant sections with CSS. This means images / videos only displayed on desktop will still get loaded on mobile even if they are never displayed and vice versa.

    The horizontal / vertical offset settings you're using can be useful in a pinch to tweak some positioning or for certain use cases like overlaying one module over another. But in general they will make it difficult (though not entirely impossible) to make designs responsive since the amount of offset you need will often vary as the screen size varies.

    A more sustainable approach to responsive design is to use vertical and horizontal alignment to place elements correctly relative to their containing elements, and use responsive units such as percentages or "vh" and "vw" (which are relative to the size of the visible portion on the page - the "viewport"). These adapt as the screen resizes so your content can best fit any given screen size.

    Using these is a bit of an art / skill, so there's unfortunately not a simple solution to every case. But learning to use them should make your life a bit easier.

    If you're able to share a link to the page you're working on, I'll be happy to try and offer some concrete examples to give you an idea of what I'm talking about.
     
    #4 Divi Booster, Aug 26, 2024
  5. Siver

    Siver New Member

    Thank you very much for your help. The solution for this was in fact the VH and VW. I set the VW to 2560px and the elements on left.
    I had a problem with placing two buttons next to each other.

    It worked on PC which a small CSS on the left button:

    float:left;
    margin-right:20px;

    But this was a problem on the mobile view. However I decided to just place the second one below the first and don't try to have everything perfect :) .

    I have tested it on my notebook display, my big monitor and my smartphone and it looked good. If you test the site on your monitor, it would be a great help too! :)

    https://www.taxi24-fuerstenfeldbruck.de

    I think that's it for now I hopefully I don't need to do anything else for it :D.

    KR
    Siver
     
    #5 Siver, Aug 27, 2024
    1. PRO MEMBER PERKS Divi Block Pro - Powerful Divi header builder for you to mix & match premade header design, mobile menu & more:Learn More
  6. Divi Booster

    Divi Booster Divi Expert

    You're welcome, Siver. It all looks good to me :)

    Well done sorting it out and give us a shout if you need help with anything else.

    Thanks!
     
    #6 Divi Booster, Aug 27, 2024
(You must log in or sign up to post here.)