text block alignment on mobile

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

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

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

Hello @bangank36

Many thanks for your help, it worked exactly like I needed .

Have a nice day.