@ben thank you very much for you help on the last thread. I am sorry but I have one more layout question for you (for now that is)… lol.
I am trying to create this layout. I have attempted to do this with position but I am having issues with responsive layout and it just does not look right.
How would you go about recreating this layout with your amazing knowledge of Wappler? FYI, I have the frosted effect implements. I am just having issues with the overlap of the card on the image.
The easiest way is to insert a card with overlay text
Give the card an identifier. In this case I have given it a class of hero
You’ll have to play around with the styling, maybe even add a few media queries. This is what I came up with for larger screen sizes
.hero {
overflow: hidden;
}
.hero img {
width: 85%;
}
.hero .card-img-overlay {
width: 350px;
top: 30%;
margin-left: auto;
Good luck!
I found a better way.
Make the overlay a flex item as in
<div class="card-img-overlay d-flex flex-column justify-content-center">
The style rules will change accordingly as in
.hero img {
width: 85%;
}
.hero .card-img-overlay {
width: 350px;
margin-left: auto;
}
amazing!
Let me try it out and Ill send you an image of the final. Thank you again for your help.
Just FYI, I am moving in to API’s and will need some help. I have read the docs but there are some grey areas.
Thanks in advance!
You are really testing this old codger! Happy to oblige.
@ben so I applied the stack you stated. (man I feel dumb…) and I am just not seeing how you are not removing the hidden elements. see photo. I have applied the card with hidden overlay, and the CSS as well. The image is fine. Are you saying to add the text field to the text field? I am a little confused.
So sorry.
cant seem to get the text centered and remove the black to the right or get the overlay text to center.
I believe the black is caused because the image is 85% width maybe there is a reason for this but looks like that empty black space is the background of the card that hasn’t been occupied fully what happens on 100%?
Maybe there is reasons for this i’m sure Ben will know more about this 
Also try view in browser to see if the text then centres?
Edit: I think I now see why Ben used 85% it looks like you are wanting a little empty space on the right if this is the case you could keep the 85% but you’ll want to make the card transparent instead of dark and remove the borders.
<div class="card text-white hero bg-transparent border-0">
Or if that whitespace is apart of the image try making the image 100% width
that worked to get the background transparent. however no dice on centering the card text justify content center.
still trying a few things…
It looks like you have some custom styles on the h5 element are any related to position or could be conflicting?
