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

Solved Website Responsiveness on Different Devices

Discussion in 'Free Divi Community Forum' started by RLstudent, Jun 12, 2020.

  1. RLstudent

    RLstudent New Member

    website: http://robyn-leonard.com
    I'm testing my website layout on different screen dimensions and seeing that my Content and About pages don't adjust very well to some screen sizes. How can I go about this? If I adjust it to one screen size it won't fit another anymore.

    My home page works well as my background belongs to a purple section with full-width header, but my other pages which have images and text etc is where I'm struggling.
     
    #1 RLstudent, Jun 12, 2020
    1. PRO MEMBER PERKS Divi Block Pro - 30+ premade custom header designs for you to choose from:View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    It's because you're using transformation scale / translate to resize & move your elements. That's why it might not work well for smaller screen.

    You should just choose the right Row structure & set the width, max-width, gutter width to fit your need. You should avoid using transformation translate or negative margin to move your elements. To me, those options are just meant to create overlap effects.
     
    #2 Divi.Help, Jun 14, 2020
  3. RLstudent

    RLstudent New Member

    Hi that's really helpful, I'm working on resetting my transformation values. I've seen that I can use width & max width to set the size, but how can I move it in x and y axis on the screen? I can't find anything called gutter width.

    Thanks again :)
     
    #3 RLstudent, Jun 14, 2020
    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Freelancer' Divi layout for all Pro members:View Demo
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    Gutter width is located in the Row Settings:

    upload_2020-6-14_16-47-47.png

    Gutter width is the margin between columns. If you set the gutter width to be 1, then there will be no white space in between columns.
    You shouldn't be moving them around. The elements should just be placed in the Row / Column.

    You just have to choose the right Row Structure:

    upload_2020-6-14_16-49-48.png

    And further adjust the Row Settings width, max-width, gutter width, padding, etc.
     
    #4 Divi.Help, Jun 14, 2020
  5. RLstudent

    RLstudent New Member

    Hi! thanks again, makes a lot more sense! We had 1 web tutorial in the entire year at our university and the teacher doesn't respond to e-mails so thank you :)
     
    #5 RLstudent, Jun 14, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Premade horizontal timeline design for your Divi site without using any plugins:View Demo
(You must log in or sign up to post here.)