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;
}
Great! Glad you were able to find a solution.
