sheriipop

Yes, it's nice not to need to. The accordion block is an interesting one, how you set up the minimum block size has an impact on how the section resizes when you open and close. I typically don't like the way it can stretch and shrink an image, but that effect can be quite interesting in the right scenario.

Oh my gosh, I didn’t know that. Thank you so much! This whole time I thought I needed a code for it. 

That's pretty easy to achieve; you need the accordion block to be bigger than the contents, and then align the contents to the bottom of the block:

Then when the accordion opens, it expands up into the space you've created for it rather stretching down.

Hello!
I'm trying to find out how to style buttons like the one from the attached photo. The URL to the website is also below. Any help would be much appreciated! Thank you!
https://studioluxe.co/about
 

Remove this CSS
section.blog-image-wrapper a { border: 1px solid #000; display: block; } Add this
section.blog-image-wrapper { border: 1px solid black; padding: 50px; } .summary-thumbnail-container { border: 1px solid black; padding: 50px; }  

Add to Design > Custom CSS
/* text image side by side-about us*/ @media screen and (max-width:767px) { div#page-section-606c54d5aca06f6920445dda>.row:nth-child(2)>.col:nth-child(-n+2) { width: 50% !important; float: left !important; } }  

Hi bsull,
I'm using SS 7.1 and I had a hard time figuring out how to switch blocks on mobile too! For 7.1, the two blocks I needed to switch had to be in their own section. On my website's desktop view I have a "Well hello there" text section introducing me and my company on the left, and a photo of me on the right. Meaning, on mobile, the intro text came before the image; but I wanted my picture to display before the text – essentially swapping the block positions.
Here's what worked for me:
@media only screen and (max-width: 640px) { section[data-section-id="insertsectionIDnumberhere"] .sqs-row { display: -webkit-flex !important; -webkit-flex-direction: column-reverse; display: flex; flex-direction: column-reverse; } } The section ID # should be a section solely dedicated to the elements you want switched. I hope this is helpful!

Add to Design > Custom CSS
/* Desktop overlay */ @media screen and (min-width:992px) { div.container.header-menu-nav-item a { margin-top: 0.5vw; margin-bottom: 0.5vw; } a.theme-btn--primary.btn { font-size: 1.2rem; padding-top: 5px; padding-bottom: 5px; } }  

Thank you!! 

Use new code
/* Mobile */ @media screen and (max-width:640px) { /* Footer 2 columns */ div#page-section-60a9baaff1f34945c7e6029d .span-6 .span-3 { width: 40% !important; float: left !important; } div#page-section-60a9baaff1f34945c7e6029d .span-6 .span-3:nth-child(2n+1) { clear: left; } }  

Missing 1 code. Try this new code
/* Split section on tablet-mobile */ @media screen and (max-width:991px) { section[data-section-id="606c53a1bf00740418d004c3"], #collection-606c538c686fde5fa29b74d3 article.sections section { width: 100% !important; float: none !important; } #collection-606c538c686fde5fa29b74d3 article.sections { flex-wrap: wrap !important; } section[data-section-id="606c53a1bf00740418d004c3"] { width: 100% !important; float: none !important; min-height: unset !important; } body.homepage .gallery-fullscreen-slideshow { height: 40vh !important; } }  

Q1. Add to Design > Custom CSS
/* Mobile */ @media screen and (max-width:640px) { /* Footer 2 columns */ div#page-section-60a9baaff1f34945c7e6029d .span-6:nth-child(2)>.row .span-2:nth-child(-n+2) { width: 40% !important; float: left !important; } div#page-section-60a9baaff1f34945c7e6029d .span-6:nth-child(2)>.row .span-2:nth-child(3) { clear: left; } } Q2. Mobile, do you want to stacked them?
 

@louieandthird Do you still need help?
Also, do you need fix these? We will help
Site URL: https://www.sherriedickinson.com/
1. (Mobile – Footer) make footer links to 2 columns

 
2. (Mobile/Tablet – homepage) Image don’t show in full size
 

3. (Tablet – Footer) Make “© Sherrie Dickinson 2021” in the same line
 

4. (Tablet/Mobile – About)  Image disappear.
https://www.sherriedickinson.com/about

5. (Mobile/Tablet – Portfolio > Content creation) Image don’t show in full size, want to resize image? Increase text width and reduce space above/below text?
https://www.sherriedickinson.com/creatives

Use this code
a#site-title { font-family: Hunter !important; }  

I agree with @louieandthird and @b1234gn, the design consistency need some work. You could "calm" the design down a bit by for example using less colors and bigger margins between some elements😇
That is probably why they leave your site.
Also, where do you get your traffic from, is it good traffic that's within your target group?

The message on the home page seems unrelated to the sale of gems. As do the floral photos. 
 

Hi! The first thing I noticed right off the bat is that there is no design consistency on your site. Consumers are generally highly visual people. You already provide great information, and I think you just need to figure out how to weave that in with a visual identity. Right now, the homepage is also looking cluttered because of all the different images that don't really go together.  Canva and Unsplash are just two amazing stock photography sites you should check out for your content.

Thank you so much @bangank36!! 

try 
#collection-606c538c686fde5fa29b74d3 article.sections { display: flex; flex-wrap: wrap; flex-wrap: nowrap; } #collection-606c538c686fde5fa29b74d3 article.sections section { width: 100%; } #collection-606c538c686fde5fa29b74d3 .sections section[data-section-id="60df4586f2f26769e1955272"] { width: 50%; float: left; padding-top: 0 !important; } #collection-606c538c686fde5fa29b74d3 .sections section[data-section-id="606c53a1bf00740418d004c3"] { width: 50%; float: left; }  

@bangank36 Thank you so much for the code! How can I make the slideshow bleed through the site header as well? Just like the site below.
https://outset-la.com

Site URL: https://www.sherriedickinson.com
I'm trying to re-create the slideshow animation the homepage below has with no luck. Can anyone help, please? Thank you!
https://outset-la.com

Hi! Yes, I'm on 7.1, and had thought that CSS might be the only answer. Do you know of any resources for it? Thanks!

Here you go – thanks!
https://www.sherriedickinson.com
PW: sdsite

Add to Design > Custom CSS
/* Header border */ header#header { border-bottom: 1px solid gray; }