ForestFern
Circle Member-
Posts
15 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by ForestFern
-
Yes, fixed with the code you sent! I added this: margin-left: auto; margin-right: auto; Thanks!
-
Add rounded corners and outline to Gallery Slideshow
ForestFern replied to posterchild's topic in Fonts, colors and images
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!
-
Add rounded corners and outline to Gallery Slideshow
ForestFern replied to posterchild's topic in Fonts, colors and images
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; } -
Resize banner slideshow on mobile only
ForestFern replied to BMLM's topic in Fonts, colors and images
@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
-
Resize banner slideshow on mobile only
ForestFern replied to BMLM's topic in Fonts, colors and images
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. -
Resize banner slideshow on mobile only
ForestFern replied to BMLM's topic in Fonts, colors and images
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.