Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #451161


    I’m facing some troubles with the portfolio raster elements breaking point.

    I’m using a 4-column portfolio raster which gets displayed well on big screens (desktop).
    But if i have a smaller screen/viewport – let’s say 1000px – it’s shrinking too much.
    I would like to have an earlier breaking point with steps to 3-col, 2-col, and so on, until 1-col on mobile.

    Or in other words: I would like to have a min-width for the single grid-entries.

    I have modified the portfolio raster shortcode, now it contains more elements, like:
    Image, Title, Sub-Title, Button, …
    In order to get a nice looking output, i need to specify a certain min-width.

    Logic should be like this:

    IF total width of raster is smaller than the sum of min-width 4-col entries
    THAN break after 3 (to achieve specified min-width)
    IF total width of raster is smaller than the sum of min-width 3-col entries
    THAN break after 2 (to achieve specified min-width)

    Let’s say min-with should be 300px:
    4-col would be 1200px (which is ok on big screens)

    On a 1024px-width screen it should be 3-col, which would be 900px (sum of 3 grid-entries).
    But at the moment i still have 4-col with shrinked grid-entries (about 250px in width)

    Hopefully i described it well enough.
    Are there any options/rules to achieve my desired min-width / breaking point?
    Thanks in advance!


    Visual Explanation:

    Actual (as it is)

    Desktop, 4-col
    [–300px–] [–300px–] [–300px–] [–300px–]

    Tablet, 4-col
    [200px] [200px] [200px] [200px]

    Target (as it should be)

    Desktop, 4-col
    [–300px–] [–300px–] [–300px–] [–300px–]
    Tablet, 3-col
    [–300px–] [–300px–] [–300px–]
    [–300px–] [–300px–] [–300px–]
    Tablet, 2-col
    [–300px–] [–300px–]
    [–300px–] [–300px–]

    • This reply was modified 9 years ago by freddyB.


    quite difficult to imagine what you need. Please post a link showing what you are talking about. We would also need screenshots showing what you want to achieve. You can use or public dropbox link for your screenshots.




    Here are 2 screenshots…normal view and shrinked view (smaller viewport).

    What I need to achieve is an earlier breaking point…from 4 per row, to 3 and then to 2 per row…because i need a min-width to show the single grid elements (items) correctly.




    I can’t promise that it’s possible, as it might be out of our support scope and you might need to hire a freelancer for this job. But we can check it, so please post a link to your website showing the elements in question. We would need to inspect it. Admin access would be useful as well. Post login details here as private reply.

    Best regards,

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.