1. HOT Divi Ultimate Header Plugin - Design Divi custom header globally in Divi Builder: https://header.diviultimate.com/
    Dismiss Notice

Changing Breakpoints to Accommodate tablet in landscape view

Discussion in 'Get Help On Divi Wordpress' started by Tina GODFREY, Jul 10, 2019 at 6:26 AM.

  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?
     
  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

     
  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.