div question
can someone explain me how to do like that?
i just dont understand how i move this div text with white background to the right side.
can somebody explain me?
You dont need to write me solution, just explain the princple.
"img attached how it should look"
----------------
thats how my code looks rn
.vrsection{
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
padding-left: 100px;
} .interaction_text h2{ font-size: 3rem; line-height: 3rem; text-transform: uppercase; font-family: "Alata"; font-weight: 300; letter-spacing: 0.3rem; color: hsl(0, 0%, 0%);
} .interaction_text{
text-wrap: wrap;
background-color: white; width: 50%;
}
padding-left: 100px;
} .interaction_text h2{ font-size: 3rem; line-height: 3rem; text-transform: uppercase; font-family: "Alata"; font-weight: 300; letter-spacing: 0.3rem; color: hsl(0, 0%, 0%);
} .interaction_text{
text-wrap: wrap;
background-color: white; width: 50%;
}
33 Replies
okay so i figured out that i need to use relative and absolute positions. BUT..
grid would be the best solution imo
position absolute would be pretty unstable for this layout
how i can do it with grid
something like that
then you can place the content in the corresponding rows and columns
oh fuck indeed
ill try
it'd be easier to help with a codepen, cause we don't have your html now... but you can use align- and justify- (either content on the parent, or self on the elements themselves) to shift the position of flex children too
And honestly, position: absolute isn't a terrible option either, you just set bottom and right to 0 and set a max- and min-width on the wrapper so it'll move on smaller screens a little. You have to have a media query to stack these elements vertically on small screens anyway
fuck my life
ive got another problem, its not responsive at all
/css/
.vrsection{
width: 100%;
min-height: 100vh;
padding-left: 100px;
display: flex;
align-items: center;
position: absolute;
} .vr_section_img{ min-width: 300px;
} .interaction_text{ text-wrap: wrap; background-color: white; max-width: 30%; display: flex; flex-direction: column; align-content: center; align-items: center; position: relative; top: 7rem; right: 6rem; padding: 40px;
} .interaction_text h2{ font-size: 2rem; line-height: 3rem; text-transform: uppercase; font-family: "Alata"; font-weight: 300; letter-spacing: 0.3rem; color: hsl(0, 0%, 0%);
} /html/ <nav> <div class="parent"> <div class="parent_photo"> <img src="attachment-dd-osama-photo.jpg" alt="" /> </div> <div class="child"> <h2>The leader in interactive VR</h2> <p> Founded in 2011, Loopstudios has been producing world-class virtual reality projects for some of the best companies around the globe. Our award-winning creations have transformed businesses through digital experiences that bind to their brand. </p> </div> </div> </nav> what i am doing wrong???
} .vr_section_img{ min-width: 300px;
} .interaction_text{ text-wrap: wrap; background-color: white; max-width: 30%; display: flex; flex-direction: column; align-content: center; align-items: center; position: relative; top: 7rem; right: 6rem; padding: 40px;
} .interaction_text h2{ font-size: 2rem; line-height: 3rem; text-transform: uppercase; font-family: "Alata"; font-weight: 300; letter-spacing: 0.3rem; color: hsl(0, 0%, 0%);
} /html/ <nav> <div class="parent"> <div class="parent_photo"> <img src="attachment-dd-osama-photo.jpg" alt="" /> </div> <div class="child"> <h2>The leader in interactive VR</h2> <p> Founded in 2011, Loopstudios has been producing world-class virtual reality projects for some of the best companies around the globe. Our award-winning creations have transformed businesses through digital experiences that bind to their brand. </p> </div> </div> </nav> what i am doing wrong???
The reason we recommend people add a codepen or similar live version of their code, is that it helps people help you. Right now, if I wanted to check your code, I'd have to set up a codepen myself, copy your code in, find a placeholder image, and then I don't even know for sure it went right and there's not some issue that's outside of the little snippets you shared here.
If you set up a codepen (it's entirely free), then we know that the issue you're having is actually the one we're going to be seeing in our browser as well, and that means we can actually help you fix it
you're also asking people to put in extra effort just to be able to put in more effort to help you, when you could be the one putting in a tiny bit of extra effort in asking your question to make it so much easier for others
isnt using a negative margin an option too ?
Not a proper one. Often creates more problems than it solves. We have better layout tools available now so there are better options than negative margins. Grid would be perfect and very simple for this layout
can you like provide me a code snippet on how to do this with grid ? i hope its not much code
Iām on mobile at the moment but if you or OP set up a codepen with the elements to overlap , one of us can help you with the grid
is this enough?
@Chris Bolson has a great example ready to go that he was kind enough to allow me to share so I donāt have to deal with codepen x mobile š
This is one of the ways you can accomplish the layout in question
https://codepen.io/cbolson/pen/RNbKrPx
Chris Bolson
CodePen
[demo] Grid template-areas overlap (responsive)
Responsive overlapping grid areas....
Try typing out the properties on your code pen (versus pasting)
Muscle memory and repetition is how you learn
Also turning on the grid visualizer in the dev tools (right click on the element -> inspect -> then thereās a little tab that says āgridā, highlight/click on that) to see the grid visually
i dont understand where the
image-stop area is coming fromThatās the name of the grid-area where the image should end. Itās like
grid-row-start: image;
grid-row-end: image-stop;
wait , since we have defined 2 rows , one name is for the start and one is for end ?
right ?
Thereās three rows in the grid
it says 2
So thereās a name for the start and a name for the end. Can if there were ten rows , there would be a grid -row-start value and a grid-row-end value
But there are three rows in the grid area
āImage image imageā-row 1
āImage-stop text .ā -row 2
ā. Text . ā -row 3
* the
. Represent empty cells. And on your travels look up āimplicitā and āexplicitā rows. Iāve hijacked this thread enoughš just saw red when I saw the ānegative marginsā comment and typed faster than my logical brain could thinkIf you donāt need overlapping content , you can use one name for the grid-row-start and for the grid-row-end but to use grid-template-areas and also have your content overlap, you need two different names.
You can also use named grid-lines.
Watching some kPow videos and this css tricks article are great resources
Chris House
CSS-Tricks
CSS Grid Layout Guide | CSS-Tricks
Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
Also this playlist is a great introduction. https://youtube.com/playlist?list=PLu8EoSxDXHP5CIFvt9-ze3IngcdAc2xKG&si=xatFjMAEw75kbXz3
only a few things have changed since this was made
YouTube
CSS Grid
And of course kPow playlist
https://youtube.com/playlist?list=PL4-IK0AVhVjPv5tfS82UF_iQgFp4Bl998&si=gQrgkKcSzbDTU4fX
YouTube
CSS Grid videos
The CSS Grid is here, and it's awesome. This playlist is a collection of all the videos I do where I use the CSS Grid, whether it's a tutorial specific to us...
thank you . i will check out
thanks for help