1. PROMO Get 60% OFF Lifetime Pro Membership & access all our Pro Divi Extensions, Divi Layouts, Divi AI Generator, Divi Block, etc.VIEW PRICING
Dismiss Notice
UPDATE Custom Color Scheme + Premade Divi Layouts - A perfect combination to boost productivity. New 'Gadget Repair' layout added.Try our Custom Color Layouts
BEST Divi Block - A revolutionary online drag & drop tool to easily mix & match 478+ premade blocks to kick start your Divi site design. Special module designs are included as well.
Learn MoreTry Free Version

Changing Breakpoints to Accommodate tablet in landscape view

Discussion in 'Free Divi Community Forum' started by Tina GODFREY, Jul 10, 2019.

  1. Tina GODFREY

    Tina GODFREY New Member

    I have finished my site ww.crowd4good.me when I look on a tablet turning the device to landscape I get laptop layout, which is wrong, it should still be tablet layout. How do I change the breakpoint?
     
    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Industrial' Divi layout for all Pro members:View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    It's not possible for you to change Divi breakpoint. It's already pre-set in Divi.

    If you just need to change the breakpoint of the header, try the below CSS in Divi > Theme Options > Custom CSS:
    **Quite a tough one as well.
    Code:
    @media screen and (max-width: 1000px) {
        .et_header_style_split nav#top-menu-nav {
            display: none;
        }
        .et_header_style_split #et_mobile_nav_menu {
            display: block;
            float: none;
            position: relative;
            margin-top: 20px;
        }
        #main-header, #main-header .nav li ul, .et-search-form, #main-header .et_mobile_menu {
            background-color: #000000;
        }
        .et_header_style_split .mobile_menu_bar {
            position: absolute;
            top: 2px;
            right: 5px;
        }
        .et_header_style_split #main-header .mobile_nav {
            display: block;
            padding: 9px 10px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-color: rgba(0,0,0,.05);
            text-align: left;
        }
        .et_header_style_split #et-top-navigation, .et_header_style_split .et-fixed-header #et-top-navigation {
            display: block;
            padding-top: 0;
        }
        .et_header_style_split #main-header {
            padding: 20px 0;
        }
        .et_header_style_centered .mobile_nav .select_page, .et_header_style_split .mobile_nav .select_page {
            display: inline-block;
            font-size: 14px;
            color: #fff;
        }
        #et-top-navigation .et-cart-info {
            margin-top: 5px;
        }
    }
    
     
  3. Tina GODFREY

    Tina GODFREY New Member

     
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring unique comment design on single blog post page:View Demo
  4. Tina GODFREY

    Tina GODFREY New Member

    Thanks I think i will just rebuild the page and adjust accordingly it will be easier for me. Thank you for your quick response.