ForestFern

Yes, fixed with the code you sent! I added this: margin-left: auto; margin-right: auto; Thanks!

That worked great! Thanks as always!

I'm also trying to make my simple list blocks smaller on mobile. I'm able to make them smaller, but I can't get them to center align on the page. Here's the site: https://www.esperanzacommunityhousing.org/southcentralheals The code I'm using: @media only screen and (max-width: 767px) { section[data-section-id="61728747420d37041db3256b"] .user-items-list-simple { display: flex; flex-wrap: wrap; justify-content: center !important; } section[data-section-id="666b6ac9c939d452c2df6346"] .user-items-list-simple .list-item { width: calc(80% - 5px); background-color: #f0f0f0; padding: 0px; box-shadow: 0 0 5px rgba(0,0,0,0.1); margin-bottom: 0px; } } Any ideas?? Thank you!

Hi, I'm running into the same problem and haven't had success with any of the code posted in this thread. I want to make each image in the banner slideshow have rounded corners. Under 'Program Areas' https://www.esperanzacommunityhousing.org/ This is the code I'm using: .sqs-gallery-design-stacked-slide img { border-radius: 12x !important; } .sqs-gallery-block-slideshow .slide.loaded .meta { border-radius: 12px !important; }

@tuanphan Fixed with the new code! Thanks so much!!!

@tuanphan I used the code linked in your blog (thank you!) but although it worked in the editor view, it didn't work in the external view. I'm only trying to target a single section so I don't think I need the HTML code anyway, but I can't get the CSS to work. I created two sections in order to have two different background images, and I want one to show on mobile and one on desktop. It is working on and off, but I can't get both mobile and desktop to hide consistently. This is my code: @media screen and (min-width: 768px) { #section[data-section-id="6672853b520cfe46f40dbbfe"].hide-on-mobile { display: none !important; } } @media screen and (max-width: 767px) { #section[data-section-id="6672853b520cfe46f40dbc01"].hide-on-desktop { display: none !important; } } esperanzacommunityhousing.org/schtest pass: sqs

Thank you @tuanphan, that worked perfectly! The addition of the last code snippet fixed it. One follow up question, is there a way to make the spacing more consistent even with different amounts of text? On the slides that have minimal text (see the Policy Advocacy pic), the spacing gets very large between text and image.

Hi, I'm trying to make the text under the image for my mobile carousel. I input this code, but the text is still directly on top of the image. What can I do? And, obviously, I changed the section ID to be matching the section ID for my site. Here's the site, and the carousel is under "Program Areas".

What's weird is that it only started happening when I input the rounding corners code. I've had the accordion for a few weeks now without the ratio of the images changing.

@creedon Follow up question - when I round the image corners, it made the list item cards much narrower! (except in the top section, not sure why). Any idea why that might be happening? It happened to all the cards in my accordion, here.

That worked great! Thanks so much!

Thank you!!! To clarify, this would go in the general Custom CSS section, but the block ID will affect where it actually changes the border radius?

I rounded the image corners on my Simple List auto layout, BUT I only want to affect the Simple List on one page, without affecting the others. How can I target that one page or section? This is the site (no password) This is the code I used: // Auto Simple List - Card Border Radius // .user-items-list-simple .list-item { border: 2px solid #eee; border-radius: 20px !important; } // Auto Simple List - Image Border Radius // .user-items-list-simple .list-item img { border-radius: 20px !important; }

How do I configure a blog so that new posts on social media (specifically Instagram) will automatically create new blog/event posts? For example, on this page, the events are created automatically by social media posts - but I don't know how it's done.