Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1321173

    HI
    2 questions:
    1.
    I have a portfolio grid using this code to give a bit of padding:

    .grid-entry .inner-entry {
    margin-right: 30px;
    	margin-bottom: 10px;
    }

    and have set the column element to show 2 columns on mobile, but I’m having trouble with the padding since any item on the right side gets extra padding: https://imgur.com/rgAsUrq. It’s more obvious on mobile than on the pc. Is there a way to still have the columns at 100% width with padding only between the 2 columns (or 3 on pc)? I have looked through other threads on this but didn’t find a good solution.

    2.
    I have a portfolio item with a long word that’s displaying too long on mobile: https://imgur.com/HYDYYFB
    Is there a way to display a different title on just that item on mobile (where I will put in a hyphen)? Page ID#3370

    thanks for your help
    Nancy

    • This topic was modified 3 years, 3 months ago by Munford.
    #1321466

    Hey Munford,
    Thank you for your patience and the link to your site and screenshot, for question 1 in the screenshot I see the extra space but I’m not able to reproduce on Android or with Dev tools with Chrome, Firefox, or Edge on Windows 10
    2021-09-18_003.png
    how are you seeing this?
    For question 2, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

    h3.grid-entry-title {
      overflow-wrap: break-word;
      word-wrap: break-word;
      -ms-word-break: break-all;
      word-break: break-all;
      word-break: break-word;
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto;
    }

    it will break all of the long grid titles, which currently is only that one post.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

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