CODEWITHSUNDEEP
wordpresselementor
Niels Vanwingh
Niels Vanwingh

Reputation: 604

WordPress Elementor Responsive Media Queries

I have certain elements in CSS for which I use media queries to represent screen sizes. When shifting the size of the browser on desktop, the queries do what they are supposed to do. When working with the buttons for Mobile, Tablet and Desktop in Elementor as well as WordPress Customize, these do not react. They do not seem to measure tablet mode by max-width/ min-width. What is wrong with my code, how are these "modes" built up?

Main question is "which properties does WordPress/ Elementor use to determine which mode you are in?"

/* design elements with breakpoints - default for desktop */
/* elements included - top menu */
/* markup for desktop */

.top_menu_list{
        list-style-type: none;
        float: right; 
        margin-right: 40px;  
    }

    li{
        float: left;
    }

    .top_menu_list a{
        display: block;
        padding: 40px 20px;
        font-size: 25px;
        font-weight: bold;
    }

/* markup for tablets */
@media screen and (min-width:769px) and (max-width:1024px) {

    .top_menu_list{
        list-style-type: none;
        float: right; 
        margin-right: 40px;  
    }

    li{
        float: left;
    }

    .top_menu_list a{
        display: block;
        padding: 40px 20px;
        font-size: 20px;
        font-weight: bold;
    }
}

/* markup for mobile */
@media screen and (max-width:768px) {

    .top_menu_list{
        list-style-type: none;
        float: right; 
        margin-right: 25px;  
    }

    li{
        float: left;
    }   

    .top_menu_list a{
        display: block;
        padding: 40px 8px;
        font-size: 12px;
        font-weight: bold;
    }
}

Upvotes: 0

Views: 13375

Answers (1)

Niels Vanwingh
Niels Vanwingh

Reputation: 604

I found an answer on this page.. https://github.com/elementor/elementor/issues/78

As from the last version (0.8) we're using these two primary breakpoints: A. 768px and below for mobile. B. 1024px and below for tablet.

I think that it covers the most devices. We prefer to keep it more simple for most users. For more customization you can always use custom CSS.

Upvotes: 1

Related Questions