Archived topic
wrap list on mobile not working
3 replies · Started by Ann on January 6, 2023
Hello
I have a problem with the list feature. It is showing perfectly on desktop. On my mobile the list don't wrap and the design shows outside the container. I have tried to wrap on the mobile icon - without any success. Can you please guide me, so I can solve this?
You can see my page with the issue her: https://shanayatemplet.dk/sjaelehealing/
Kind regards Ann :-)
Hi there,
so the block plugin you're using, its container (?) block is throwing this CSS at anything you add inside it:
body .wp-block-uagb-container > .uagb-container-inner-blocks-wrap > :not(.wp-block-uagb-container):not(.wp-block-uagb-column):not(.wp-block-uagb-container):not(.wp-block-uagb-section):not(.uagb-container__shape):not(.uagb-container__video-wrap):not(.wp-block-spectra-pro-register), body .wp-block-uagb-container > .uagb-container-inner-blocks-wrap, body .wp-block-uagb-container > :not(.wp-block-uagb-container):not(.wp-block-uagb-column):not(.wp-block-uagb-container):not(.wp-block-uagb-section):not(.uagb-container__shape):not(.uagb-container__video-wrap):not(.wp-block-uagb-image):not(.wp-block-spectra-pro-register) {
min-width: unset !important;
width: 100%;
}So your UL list block is forced to be 100% wide, which doesn't take into account that elements such as lists have margin or padding. Its not very good CSS and is something the plugin developer should address.
For the time being, try adding the CSS to your site:
body .wp-block-uagb-container > ul {
max-width: calc(100% - 3em);
}
OR you may want to consider using a GenerateBlocks Container Block instead, we don't add CSS that affects the nested blocks styles :)
Thank you for explaining to me. That resolved it. Have a nice weekend :-)
Glad to be of help!