Place image below text image block / Stack (image alignment below text)

Site URL: https://www.nobleglobalbox.nl/bereiden

I've created a page with some image and text using the image block > stack.

I want to place the images in all blocks below the text instead of above.

Can somebody help me out with some code? Thanks a million!

6 minutes ago, Bluemonque said:

Site URL: https://www.nobleglobalbox.nl/bereiden

I've created a page with some image and text using the image block > stack.

I want to place the images in all blocks below the text instead of above.

Can somebody help me out with some code? Thanks a million!

hi add below code to CSS editor
.image-block .design-layout-stack { display: flex !important; flex-direction: column-reverse !important; }

On 5/25/2021 at 5:53 PM, Bluemonque said:

Site URL: https://www.nobleglobalbox.nl/bereiden

I've created a page with some image and text using the image block > stack.

I want to place the images in all blocks below the text instead of above.

Can somebody help me out with some code? Thanks a million!

I see some problems, do you need help with these?

Site URL – https://www.nobleglobalbox.nl/

1. (Mobile-Footer) Reduce logo size?

2. (Tablet-Footer) Increase column 3 text width?

3. (Tablet-Menu) Increase content width?

On 5/25/2021 at 12:58 PM, Agha_Waqas said:

hi add below code to CSS editor
.image-block .design-layout-stack { display: flex !important; flex-direction: column-reverse !important; }

Thanks a lot! This works perfect. Ideal would be that the images are aligned straight. They're now a little bit 'floating' below the text. Reason I need to use the images in the image block is that every image belongs to a text. But this is perfect already!

14 hours ago, tuanphan said:

I see some problems, do you need help with these?

Site URL – https://www.nobleglobalbox.nl/

1. (Mobile-Footer) Reduce logo size?

2. (Tablet-Footer) Increase column 3 text width?

3. (Tablet-Menu) Increase content width?

Thanks for your reply @tuanphan! 
It would be great off course if you can support me with these codes. (For example the logo: I saw it also but because I've added the logo with code / (svg file) I did not know how to change this).

On 5/27/2021 at 1:40 PM, Bluemonque said:

Thanks for your reply @tuanphan! 
It would be great off course if you can support me with these codes. (For example the logo: I saw it also but because I've added the logo with code / (svg file) I did not know how to change this).

Add to Design > custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* reduce logo size */
div#block-yui_3_17_2_1_1621081102997_5975 {
    width: 50%;
}
}
/* tablet */
@media screen and (max-width:991px) and (min-width:768px) {
/* footer text width */
div#block-yui_3_17_2_1_1621081102997_22770+.row>.span-5 {
    width: 30%;
}
div#block-yui_3_17_2_1_1621081102997_22770+.row>.span-3 {
    width: 35%;
}
div#block-yui_3_17_2_1_1621081102997_22770+.row .span-5 .span-2 {
    width: 80%;
}
/* menu page width */
[data-section-id="609fc2b094d6a52adf2fbbec"] .content {
    width: 95% !important;
}
}

On 5/28/2021 at 11:59 AM, tuanphan said:

Add to Design > custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* reduce logo size */
div#block-yui_3_17_2_1_1621081102997_5975 {
    width: 50%;
}
}
/* tablet */
@media screen and (max-width:991px) and (min-width:768px) {
/* footer text width */
div#block-yui_3_17_2_1_1621081102997_22770+.row>.span-5 {
    width: 30%;
}
div#block-yui_3_17_2_1_1621081102997_22770+.row>.span-3 {
    width: 35%;
}
div#block-yui_3_17_2_1_1621081102997_22770+.row .span-5 .span-2 {
    width: 80%;
}
/* menu page width */
[data-section-id="609fc2b094d6a52adf2fbbec"] .content {
    width: 95% !important;
}
}

 

Thanks a million @tuanphan! Works perfect.