Jump to content

text block alignment on mobile

Go to solution Solved by Beyondspace,

Recommended Posts

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
  • Solution
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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

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.