Support » Plugin: Food and Drink Menu » Mobile View not working properly

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author NateWr

    (@natewr)

    Hi @akadis2,

    I didn’t see the CSS code being applied. Are you sure that it’s been added?

    Looking at the example code from the other thread, I think you’ll want to change the first line:

    
    @media screen and (min-width: 767px) and (max-width: 992px) {
    

    To the following:

    
    @media screen and (max-width: 992px) {
    

    Try that and see if it helps.

    Thanks for your prompt reply. I had removed the code but applied it again. I made the suggested modification, but there is still a breakpoint in mobile view after the image.

    This is the code I added:

    @media screen and (max-width: 992px){
    .fdm-menu .fdm-columns-2 .fdm-column {
    width: 47%;
    float: left;
    }
    .fdm-item-image {
    width: 30%;
    float: none;
    }
    .fdm-menu .fdm-columns-2 .fdm-column-last {
    float: right;
    margin: 0 0 0 3%;
    }
    }

    .fdm-item-price-wrapper .fdm-item-price {
    display: inline-block;
    margin-left: 0.5em;
    }
    .fdm-item-price-wrapper {
    max-width: 30%;
    }

    UPDATE: The Divi support team suggested a small change to the code and the mobile view now looks very nice. It doesn’t look like the desktop view, but I like the result.

    Replaced this code:

    .fdm-item-image {
    width: 30%;
    float: none;
    }

    with this:

    .fdm-item-image {
    float: none;
    }

    Plugin Author NateWr

    (@natewr)

    Great! Glad you were able to find a solution.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Mobile View not working properly’ is closed to new replies.