Jump to content

Format Summary Block Mobile View Only

Recommended Posts

Site URL: https://www.firstblessing.org/2022-events-1

I've managed to get "buttons" on my event items in the event summary block and it looks great on desktop. However, on mobile (cellphone) the button text is too long for the column container and therefore wraps to a second line. On tablet view the button text is overlapping each other. I used line-height to adjust the spacing on the cellphone mobile view so that it wouldn't overlap but I'm not loving that it looks like 2 separate boxes. Looking for a way to either make the 'button' to span the full width of the screen on mobile OR to make the background box look like a single box with text wrapped inside. 

This is the code I'm using right now: 

 .summary-excerpt a {
    background-color: #333333 !important;
    color: white !important;
    font-size: 18pt;
    padding: 8px 10px;
    text-decoration: none;
    }
  @media screen and (max-width:640px) {
.summary-excerpt a {
   font-size: 12px !important;
   line-height: 2.8 !important;
}

Capture_6-21.PNG

Capture_6-21_1.PNG

Link to comment
  • Replies 1
  • Views 119
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.