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

Building w/visual builder screen size issue

Discussion in 'Free Divi Community Forum' started by paul whitehead, Nov 29, 2019.

  1. paul whitehead

    paul whitehead New Member

    I notice when I use the visual builder (mobile) view and go to the browser 375x667 view, it looks totally different. I think divi's mobile visual editor's perspective is at 469 when the browser is 375. Any thoughts? its really throwing me off a bit!

    So when I'm styling a look using the visual builder mobile view, it looks great. When i view the site on the same browser to preview, things are over lapping because divi's mobile visual builder media query is bigger than what browsers are. anyone else having this issue?

    https://recordit.co/3yOx8cSFxa

    *If you look at the attached files, you'll see what I mean. I also attached a video as well. Thanks!
     

    Attached Files:

    #1 paul whitehead, Nov 29, 2019
    1. PRO MEMBER PERKS Divi.Help Header AI Generator - Try the power of AI to generate a custom Divi header for you:Try Now
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Instead of px, you can try vw.

    For example, for your button font size in mobile view, you can set it to be 3vw. Adjust it to fit your need.
     
    #2 Divi.Help, Nov 30, 2019
  3. paul whitehead

    paul whitehead New Member

    do this for all the items i have in that 3 column row? I know these modules are suppose to stack in mobile but I'm forcing them to be the way they are except divi's mobile view isn't accurate with standard browser sizes. No?
     
    #3 paul whitehead, Nov 30, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade mega menu design for your Divi site without using any plugins:View Demo
  4. paul whitehead

    paul whitehead New Member

    So to be fair to people helping, here's what I did... Using mamp, I created a local site with a fresh install of WP & Divi. I made a 3 column row with 3 blurbs to test. I added a class of .pw-3row for my column.

    I didn't use a child style sheet, I just used the add custom css field inside of wp & divi for this. Once i added

    Code:
    Log In or Sign Up to view this code.
    Things lined up perfectly like I want, but no so fast.. I did some split testing with divi's mobile size vs what browsers default are & they're off.

    Video Demo:
    https://recordit.co/VsFhpSL4HW

    The image below is inside the divi builder (mobile view) using the theme builder.

    Screen Shot 2019-11-30 at 7.12.46 AM.png

    Here is the test view inside of the browser.
    Screen Shot 2019-11-30 at 7.13.18 AM.png
     
    #4 paul whitehead, Nov 30, 2019
  5. Divi.Help

    Divi.Help Administrator
    Staff Member

    Yup. Divi Builder mobile view is just fixed at certain screen size. So, it might look different for mobile browser with smaller screen size than the Divi Builder mobile view.

    And the difference will be even more obvious when you're showing 3 columns in a row in mobile view.

    You will either need some custom CSS for the smaller breakpoint to fix your issue, or try the vw method that I mentioned in the previous post. Basically, vw unit will adjust the size accordingly based on the screen size. Meaning in smaller screen size, it will have smaller size.
     
    #5 Divi.Help, Nov 30, 2019
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring unique comment design on single blog post page:View Demo
  6. paul whitehead

    paul whitehead New Member

    would it be a good rule of thumb to store a preset for divi's mobile phone view port when viewing split testing? Screen Shot 2019-11-30 at 10.51.23 AM.png
     
    #6 paul whitehead, Nov 30, 2019
  7. Divi.Help

    Divi.Help Administrator
    Staff Member

    It all depends on your preference.
     
    #7 Divi.Help, Nov 30, 2019
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Beautify your Divi archive / category page with 15 different premade blog designs:Learn More
(You must log in or sign up to post here.)