CSS code for stacking blocks in Tablet View

Site URL: https://www.silverstreakstudio.com/

Hi,

I have tried various snippets of CSS from the web but cant seem to get my content blocks to stack in Tablet View (portrait). Website is in Brine 7.0 and is live.

Specifically, I need to stack the blocks on my Aerial Page: https://www.silverstreakstudio.com/aerial so the image of the floating raft is above the text block starting "Getting airborne.." This will mean all the blocks on the page are stacked in case the code is easier for the whole page.

Also on the Home Page, https://www.silverstreakstudio.com/ The Text blocks and button currently to the right of the Showreel all need to be stacked underneath the Showreel  so they are full width like they are in Mobile view - see image attached. After the Photography index block, there are three columns (two images on either side and text in the middle) that also don't work in Tablet view (screenshot attached). Is it possible to reduce the size of the image block widths slightly so the text column in the middle is wider? And/Or is it possible to remove the spacer between the bottom of the text box and the button only in tablet view as the spacer works well in desktop mode?

Finally, I have also been struggling to reduce the top and bottom padding in the quote blocks. I want to reduce the space between the text and the separator line and also between the separator line and the edge of the box. For some reason there seems to be more space on the bottom than the top.

Many thanks in advance for anyone who can help with all this!!

#1. https://www.silverstreakstudio.com/aerial

Add to Design > Custom CSS

/* Getting airbone image text */
@media screen and (max-width:900px) {
div#block-yui_3_17_2_1_1632835806925_15892+.row+.row {
    display: flex;
    flex-direction: column-reverse;
}
div#block-yui_3_17_2_1_1632835806925_15892+.row+.row>.col {
    width: 100%;
}
}

If it works, we will check other sections

Sorry for the late reply, Tuanphan. I was out of the office for a few days.

That works perfectly for the raft image - thanks so much.

I wasn't able to replicate for the other blocks though as I couldn't see which block your code referred to - it didn't seem to be the block ID I found for the raft image or for the text block below it. So if you could help with the other sections as well, that would be amazing.

Thanks again,

James

On 1/5/2022 at 3:19 PM, Silverstreak said:

Sorry for the late reply, Tuanphan. I was out of the office for a few days.

That works perfectly for the raft image - thanks so much.

I wasn't able to replicate for the other blocks though as I couldn't see which block your code referred to - it didn't seem to be the block ID I found for the raft image or for the text block below it. So if you could help with the other sections as well, that would be amazing.

 

Thanks again,

James

 

#2. #3. Add to Design > Custom CSS

/* Tablet - Homepage */
@media screen and (max-width:900px) {
/* Show reel */
section#new-page-41 .span-12 .col {
    width: 100%;
}
/* Photography */
section#new-page-14 .span-4:not(:nth-child(2)) {
    width: 25%;
}
section#new-page-14 .span-4:nth-child(2) {
    width: 50%;
}
/* quote */
section#quote-3 .spacer-block {
    height: 0;
}
}

Thanks so much Tuanphan.

That works for the quote 3 and quote 4. But If I use the same code for quote 1 and quote 2, I get a gap between the two sections, so I can see the brown background in between the two sections. I also tried the same code to get rid of the spacer above the 'Take me to the Movies' button in the New page-41 section:

section#new-page-41 .spacer-block {
    height: 0;
}

But while that reduced the spacer, it also left a gap between sections - see attached image.  Is it possible to get rid of these spacers: in quote 2 and quote 1 and New-page-41 above the 'Take me to the Movies' button without creating gaps between the sections ?

Thanks again for your help - much appreciated.

With "they kept us.." use this

/* tablet they kept us */
@media screen and (max-width:900px) and (min-width:641px) {
section#quote-2 .quote-block {
    padding: 0px !important;
}
section#quote-2 .spacer-block {
    padding: 0 !important;
}
}

On 1/8/2022 at 4:26 AM, tuanphan said:

With "they kept us.." use this

/* tablet they kept us */
@media screen and (max-width:900px) and (min-width:641px) {
section#quote-2 .quote-block {
    padding: 0px !important;
}
section#quote-2 .spacer-block {
    padding: 0 !important;
}
}

 

Thanks Tuanphan - that works for Quote block 2 and quote block 4. If I could do the same thing to quote block 1 and quote block 3 - ie remove the padding - without creating a gap between sections, that would be amazing. I did try using the same code but it still created a gap.

Then the last thing would be to remove the spacers above the buttons Take me to the Movies and  Put Me in the Picture in Tablet mode. Then it would all be perfect!

Thanks again for all this help - it is very much appreciated!

Just sent the code. You can check.