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

text block alignment on mobile


michael_n

Question

Site URL: https://liptovskydvor.sk

Hello all,

I would like to ask for help with aligning text block within section on my title page. 

I would like to have top left alignment for desktop version, but have different, bottom alignment for mobile version. I also need the subtle background overlay so the text does not blend into the image: 

The block ID is: block-yui_3_17_2_1_1617563024648_5628

My CSS code so far: 

/* bkg overlay mobile title block and alignment */
@media screen and (max-width:640px) {
#block-yui_3_17_2_1_1617563024648_5628 {
background-color: rgba(255, 255, 255, 0.80) !important;
}
}

Many thanks for any help. 

Michael

Screen Shot 2021-04-05 at 12.05.56 AM.png

Screen Shot 2021-04-05 at 12.06.07 AM.png

Link to comment

2 answers to this question

Recommended Posts

  • 0
3 hours ago, michael_n said:

Site URL: https://liptovskydvor.sk

Hello all,

I would like to ask for help with aligning text block within section on my title page. 

I would like to have top left alignment for desktop version, but have different, bottom alignment for mobile version. I also need the subtle background overlay so the text does not blend into the image: 

The block ID is: block-yui_3_17_2_1_1617563024648_5628

My CSS code so far: 


/* bkg overlay mobile title block and alignment */
@media screen and (max-width:640px) {
#block-yui_3_17_2_1_1617563024648_5628 {
background-color: rgba(255, 255, 255, 0.80) !important;
}
}

Many thanks for any help. 

Michael

Screen Shot 2021-04-05 at 12.05.56 AM.png

Screen Shot 2021-04-05 at 12.06.07 AM.png

You can use

@media screen and (max-width: 640px) {
  section[data-section-id="60507e90a2c0da511d88d87f"] {
    align-items: flex-end !important;
  }
  section[data-section-id="60507e90a2c0da511d88d87f"] .content-wrapper {
    padding-bottom: 4vw !important;
  }
}

#block-yui_3_17_2_1_1617563024648_5628 {
    background-color: rgba(255,255,255,.8) !important;
}

image.thumb.png.0c340874da9eed5c55c1c7d44fd04714.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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...