Struggling with creating layouts and using correct size units
I'm trying to recreate the hero section of this design. I've tried different size units from pixels,vh to % and i cant get the edges of the images to touch like in the design.
I''ve made a div with 2 containers, 1 has the text and one has the image. I applied display:flex and they allign correctly but its not as pixelperfect as the design.
What should i do to recreate the design? i've tried css grid and gotten the same results. I can look up the solution but for now i would like to figure it out myself with some pointers. Any advice would be appreciated.
https://www.frontendmentor.io/challenges/sunnyside-agency-landing-page-7yVs3B6ef
Frontend Mentor
Frontend Mentor | Sunnyside agency landing page coding challenge
This challenge will be a perfect test of your layout and responsive skills. There's a tiny bit of JS for the mobile menu, but the focus is HTML & CSS.
26 Replies
Can't get the images to touch the edgesAre you talking about a small space on the bottom of the image? Use
display: block on the imageIn the hero section there's the yellow image on the right on the first row, and a red image on the left on the second row. The bottom left side of the yellow image touches the top right side of the red image. I'll try display block!
Yup typically you want
This helps make your
imgs be responsive. Look up css resets if you're not familiar yet with what they are but you'll want to include those in your projects typically.
Other than that, I'd use grid for this.
You can make that section a 2 column grid and that should work for what you need!For resets i generally always use margin: 0 and border-box. il try grid but i got the same results as i did on flex so it might be the display:block. ill tinker around and see if it fixes the issue
Cool! Send a codepen if you can't get it to work and I'll try to see what's up
I'd just do something like this though as a quick thing:
Could get more semantic with it (I'd consider having each
text and img in its own section because they look like they could be sections to me) but that would overcomplicate your css / html and no need for that right now when you're learning.
You could even get really fancy with it and include figure with figcaption maybe 🤔 but maybe I'm overthinking it and getting too semanticI currently have:
Div
div < right side with text
h1
p
a
/div
div <- left side with img
img
div
I usually do it like this? should i put it in the media query instead of the class?
section {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
I put it in the media query because you'd want your grid to "stack" on mobile (and potentially tablet)
When I say stack I mean have only 1 column and have each text / img be in its own row
That makes sense! thanks for taking the time to help
Yup! I would just make sure you're learning some semantics; you don't want to use
divs if another tag is more semanticcorrect me if im wrong but arent div/sections the same but sections are better for SEO?
They are the same if you don't include a title, so let me explain
Let me preface this by saying I'm not an expert on accessibility so if anyone else is reading this thread please correct me if I'm wrong.
How I understand it is if you give a section a title, your browser will treat that as a landmark and it'll be more accessible (I don't know the specifics).
So you want something like this:
If you don't set up your sections similar to this (you can ignore the
sr-only if you want the title to show up for visual users) then sections and divs are functionally the same, yea
That's why I was suggesting we could do sections within sections, because I feel like each "feature" could be its own section:
damn this is some good stuff, i knew the aria existed but never made use of it since i was so focussed on layouts
Yea it's a whole separate thing which is why I don't think it's recommended to overload you and have you focus on it but I think
sections are so commonly used that it's good to just learn that part for now. I could even be wrong in how I'm talking about it because I've never really read the spec so you could learn more than me just by reading it lolI'm looking at this snippet and wondered something, features-title is the container of both sections right?
<section aria-labelledby="features-title">
<h2 class="sr-only" id="features-title">Our features</h2>
<section aria-labelledby="branding-title">
<div class="text-container">
<h3 id="branding-title">Transform your brand</h3>
<p>Lorem ipsum...</p>
<a href="/features#branding">Transform your brand</a>
</div>
</section>
<!-- other section goes here -->
</section>
Yup!
So you'd have to change your css because that 2 column grid approach won't work if you put it on the
features-title section
You'd have to make the inner sections either flex / grid (i'd still use grid personally) with a 2 column layoutthats what i was wondering! doestn the h2 get left out of the parent container if you would apply flex/grid
The
h2 has a sr-only class on it so the styling doesn't matter
It's just there to describe what the section is (a features section) for people using screenreaders
And then I'm using h3s for the other titles because you want your headings to be in sequential order, at least how I understand itwhy do you prefer grid over flex? you cant you use 50% width on each side and kinda have the same effect? or is it responsive related?
you can! either one works; I just kind of suck at laying out flex stuff tbh and prefer grid
Typically if you want strict control over how the children behave you use grid, and if you want your children to behave kind of how they want you use flex
In this case you want the children to be 50/50, and you can definitely use flex but imo it makes more sense to use grid here
them kids these better behave so ill apply grid, once again thanks for all the tips. ill tinker with it and update you!
lol sounds good!
one last thing, where would the image go in that snippet? i assume if i want it on the right side it goes in a new div below the <a> tag? and before the text container if i want it on the left?
I updated the example, right after the
.text-containerI applied the current code below and the results is kinda the same? on my screen there's still a white bar (padding?) on the right side of the yellow image and the edges dont connect but when i change the size and minimalize it the edges do touch and it looks like the example. So i think its a size issue but im not sure how to troubleshoot it
<section class="hero-page">
<section class="section_1">
<div class="section1_text">
<h3 id="branding-title">Lorem</h3>
<p>Lorem ipsum...</p>
<a href="/features#branding">Lorem</a>
</div>
<img src="" alt="" />
</section>
<section class="section_2">
<img src="" alt="" />
<div class="section2_text">
<h3 id="branding-title">Lorem</h3>
<p>Lorem ipsum...</p>
<a href="/features#branding">Lorem</a>
</div>
</section>
</section>
.section_1,
.section_2{
display:grid
grid-template-colums: repeat(2,1fr)
}
.section1 img,
.section 2 img{
display:block
max-width:100%
}
Can you put it in a codepen please?
il put it on solved for now since i've been stuck for a while and want to continue the rest of the page, im coming back to it later after finishing the rest. Thanks for the help tho!
i figured it out btw, it was width instead of max-width