CSS help on upfront fixing overlap issue with grouped content

Hi, Im currently using upfront Luke + Sarah theme, i have grouped 5 images and their text below they are separated into sections. when displayed on Desktop devices it looks great, However when the screen size goes smaller than a certain amount the text start to overlap and the images begin to crop. Mobile screenshot - http://www.awesomescreenshot.com/image/1631065/655c51092663f3ff9eb4580c8f55cd02

Is it possible to have them display one below the other when the screen resolution falls below the point where they all cant be displayed horizontally if that makes sense?

Support Access is open domain - http://tinyurl.com/plletgb

Please dont post any brand related information/ screenshots or domain links as i have had issues with google caching this information and linking it to their google searches of my site ... very bad for brand... please use temporary image upload / tiny url / pastebin etc to mask this information.



  • Sajid

    Hi Tom,
    Hope you are doing good today!

    That's what Upfront have to do by default. It should stack on mobile devices. The reason its not doing it is that you have added the following custom CSS code to restrict its width to 20%.

    #wrapper-1473581610445-1979, #wrapper-1473581618735-1955, #wrapper-1473581622415-1283, #wrapper-1473612076032-1620, #wrapper-1473612079763-1352 {
        width: 20% !important;

    I can understand, you might have added it for purpose on desktop screens. To make it effect only on Desktop, replace that code with following one:

    @media (min-width:768px){
    #wrapper-1473581610445-1979, #wrapper-1473581618735-1955, #wrapper-1473581622415-1283, #wrapper-1473612076032-1620, #wrapper-1473612079763-1352 {
        width: 20% !important;

    Hope that helps! Feel free to post a reply if you need further assistance :slight_smile:

    Best Regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.