Jump to content

How Do I Update Blog Roll Styling Using CSS

Recommended Posts

  • Replies 11
  • Views 472
  • Created
  • Last Reply

Top Posters In This Topic

Add to Design > Custom CSS

@media screen and (min-width:768px) {
div#BlogMasonryContainer {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-row-gap: 40px;
    grid-column-gap: 50px;
}

.blog-masonry .masonry-ready .entry.is-loaded {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
    background-color: #fff;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 15px rgb(100 100 100 / 10%) !important;
    -moz-box-shadow: 0px 0px 15px rgba(100,100,100,.1) !important;
    box-shadow: 0px 0px 15px rgb(100 100 100 / 10%) !important;
    padding: 20px;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
10 hours ago, tuanphan said:
@media screen and (min-width:768px) {
div#BlogMasonryContainer {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-row-gap: 40px;
    grid-column-gap: 50px;
}

.blog-masonry .masonry-ready .entry.is-loaded {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
    background-color: #fff;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 15px rgb(100 100 100 / 10%) !important;
    -moz-box-shadow: 0px 0px 15px rgba(100,100,100,.1) !important;
    box-shadow: 0px 0px 15px rgb(100 100 100 / 10%) !important;
    padding: 20px;
}}

 

Screen Shot 2021-11-07 at 10.16.08 AM.png

Link to comment
13 hours ago, thejschweigert said:

Receiving an RBG color function error when adding the code. How do I resolve?

Try this new code

@media screen and (min-width:768px) {
div#BlogMasonryContainer {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-row-gap: 40px;
    grid-column-gap: 50px;
}

.blog-masonry .masonry-ready .entry.is-loaded {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
    background-color: #fff;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
    -moz-box-shadow: 0px 0px 15px rgba(100,100,100,.1) !important;
    box-shadow: 0px 0px 15px rgba(100, 100, 100,0.1) !important;
    padding: 20px;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 11/11/2021 at 11:01 PM, thejschweigert said:

The cards on the blog page are the same size but the cards for the summary widgets are different sizes. I'd like for the summary widget to appear like the post roll on the blog page.

I'm using summary widget w/ grid view. See attached.

Screen Shot 2021-11-11 at 7.59.17 AM.png

Screen Shot 2021-11-11 at 8.00.26 AM.png

Hi,

You mean make them same height?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.