Jump to content

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

Recommended Posts

  • Replies 6
  • Views 806
  • Created
  • Last Reply
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.