Jump to content

How to adjust the text from centre to left bottom corner?

Go to solution Solved by Beyondspace,

Recommended Posts

Hello guys, I would like to ask you for help.
I would like to update the position of the text from the center to the left bottom coroner, with small padding from the left and bottom border. Same already have for blog posts.

First screenshot is current position of the text
Second screenshot is the position how I would like to apply it.

URL-1: https://www.slovakspots.com/bratislava

URL-2: https://www.slovakspots.com/banska-stiavnica

URL-3: https://www.slovakspots.com/more-cities-landing-page

Password: Ulicajekrasnydom


Thank you very much! 🙂 

Snímka obrazovky 2024-06-08 o 9.42.11.png

Snímka obrazovky 2024-06-08 o 9.42.26.png

Link to comment
  • Replies 4
  • Views 221
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
7 hours ago, GregOvens said:

 

Hello guys, I would like to ask you for help.
I would like to update the position of the text from the center to the left bottom coroner, with small padding from the left and bottom border. Same already have for blog posts.

First screenshot is current position of the text
Second screenshot is the position how I would like to apply it.

URL-1: https://www.slovakspots.com/bratislava

URL-2: https://www.slovakspots.com/banska-stiavnica

URL-3: https://www.slovakspots.com/more-cities-landing-page

Password: Ulicajekrasnydom


Thank you very much! 🙂 

Snímka obrazovky 2024-06-08 o 9.42.11.png

Snímka obrazovky 2024-06-08 o 9.42.26.png

Try the following custom css

/*https://www.slovakspots.com/bratislava*/
.fe-block-yui_3_17_2_1_1715755680111_21807 ~ .fe-block .sqs-block-html .sqs-block-content h2{
  text-align: left !important;
  padding-left: 10px;
}

.fe-block-yui_3_17_2_1_1715755680111_21807 ~ .fe-block .sqs-block-html {
  justify-content: flex-end;
}

/*URL-2: https://www.slovakspots.com/banska-stiavnica*/

.fe-block-yui_3_17_2_1_1715755680111_16617 ~ .fe-block .sqs-block-html .sqs-block-content h2{
  text-align: left !important;
  padding-left: 10px;
}

.fe-block-yui_3_17_2_1_1715755680111_16617 ~ .fe-block .sqs-block-html {
  justify-content: flex-end;
}

/*URL-3: https://www.slovakspots.com/more-cities-landing-page*/
.fe-block-b7bc86a8c863fa679d9d ~ .fe-block .sqs-block-html .sqs-block-content h2{
  text-align: left !important;
  padding-left: 10px;
}

.fe-block-b7bc86a8c863fa679d9d ~ .fe-block .sqs-block-html {
  justify-content: flex-end;
}

Let me know how it works on your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 2 weeks later...

@Beyondspace thank you very much! Provided code helped me a lot. 

I would like to ask you whether would be possible to implement the css code which would on those pages apply gradient collor over image.

I would like to make the title in the lower part of the picture more readable because the black gradient in that part of the picture would already be quite intense. I attached also screenshot of what effect I have in my mind. 

Thank you a lot! 🙂 

Snímka obrazovky 2024-06-19 o 13.26.50.png

Snímka obrazovky 2024-06-19 o 13.32.39.png

Link to comment

@Beyondspace Hi, that's me again. With regards, to my second question related to gradient.

I was able to apply following code. But I can't figure out how could I handle the width of the gradient to act properly. Because when I use width: 100%, gradient is applied out of the element box (see the screenshot). If I used les than 100% it do not fit during resizing of the screen. Is there a way how it could be applied better to actually fit the width of my elements.

 

*/
.fe-block-b7bc86a8c863fa679d9d ~ .fe-block .sqs-block-html .sqs-block-content h2 {
  text-align: left !important;
  padding-left: 10px;
  padding-bottom: 4px;
  display: inline-block; /* Makes the gradient visible behind the text */
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  width: calc(100% - 2.4px);
}

.fe-block-b7bc86a8c863fa679d9d ~ .fe-block .sqs-block-html {
  justify-content: flex-end;
}
 

Snímka obrazovky 2024-06-20 o 12.25.28.png

Link to comment
On 6/20/2024 at 5:27 PM, GregOvens said:

@Beyondspace Hi, that's me again. With regards, to my second question related to gradient.

I was able to apply following code. But I can't figure out how could I handle the width of the gradient to act properly. Because when I use width: 100%, gradient is applied out of the element box (see the screenshot). If I used les than 100% it do not fit during resizing of the screen. Is there a way how it could be applied better to actually fit the width of my elements.

 

*/
.fe-block-b7bc86a8c863fa679d9d ~ .fe-block .sqs-block-html .sqs-block-content h2 {
  text-align: left !important;
  padding-left: 10px;
  padding-bottom: 4px;
  display: inline-block; /* Makes the gradient visible behind the text */
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  width: calc(100% - 2.4px);
}

.fe-block-b7bc86a8c863fa679d9d ~ .fe-block .sqs-block-html {
  justify-content: flex-end;
}
 

Snímka obrazovky 2024-06-20 o 12.25.28.png

This line is invalid, CSS box won't read it.

 width: calc(100% - 2.4px);

You need to use this

 width: calc(~"100% - 2.4px");

 

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

Create an account or sign in to comment

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

×
×
  • 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.