Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Bluemonque

Question

6 answers to this question

Recommended Posts

  • 0
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; }

Link to comment
  • 0
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?

nobleglobalbox.nl-01-min.png

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

nobleglobalbox.nl-02-min.png

3. (Tablet-Menu) Increase content width?

nobleglobalbox.nl-03-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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!

Link to comment
  • 0
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?

nobleglobalbox.nl-01-min.png

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

nobleglobalbox.nl-02-min.png

3. (Tablet-Menu) Increase content width?

nobleglobalbox.nl-03-min.png

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).

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...