image wrapper
hey, i have a design of a hero section that i am trying to re-create. In the design on mobile view of the image doesn't get affected by the wrapper (it touches the edges of the page) but on desktop view it does (it get's centered along with the other content). I've currently got it set up where the image is affected by the wrapper on all views but i can't figure out how to make it get pushed out to the edge on mobile, I've tried just applying the wrapper class on the column with the text which makes it work on mobile but not desktop due to there no longer being a wrapper on the image (it's a great flip flop thing i've encountered here 😂), i'd appreciate anyone's help on this. Here's a codepen link of what i've currently got if that helps https://codepen.io/deerCabin/pen/LYMpJRL. Thanks in advance!
33 Replies
Like this?
yeah that'll be it
i feel it's something simple i've overlooked 😅
In the
.wrapper class you’ve got width: calc(100% - 2em);. I changed it to width: 100%;. You can put the calc in a media query for larger screen sizes.ah the text needs to be pushed in by the wrapper though. There's a navbar too that is also being pushed in but i didn't include that here, i'm sorry i mustn't have made it clear enough. it's only the image that needs to touch the sides without altering the wrapper. I appreciate that though 😄.
I’m not sure exactly what you mean. Why don’t you add padding or margin to the text or nav as needed?
no worries man, i definitely poorly explained this one. here's the original design if that helps, i probably should have sent this in the first place tbh, it's late, that's my fault 😅. i decided to alter the design a little whilst recreating it and push the navbar in a bit to be in line with the hero content, so i thought adding an overall wrapper class on each section would be best for this case, but it leaves the image issue as we've discussed. In this case wouldn't adding padding and margin make the css not easily maintainable? Would it not be something to do with image that needs to be changed or adapted?
Hey! Just to add on to what Brian said, why not make the width 100% for the wrapper, and then add padding to your hero__content?
Hey! i had a feeling you'd show yourself at some point man 😅, ohh yeah that would for sure be something, but then then the same spacing on the sides applies to the header on mobile too, wouldn't adding padding for both be repeating myself a little if it could be achieved with one class? or is that an okay practice?
i tried experimenting with something you previously taught me by making the image have a
min-width of 100vw and setting a negative margin left and that worked to some degree but left a scrollbar even when perfectly lined up, but i have a feeling that isn't the right way to go about this one?That's honestly exactly where my mind was going if you didn't want to do it the other way but I'm also getting a scrollbar for some weird reason....
Honestly I feel the padding method is okay! Maybe wrapping anything that needs to have that padding in a section, and the putting a simple css rule for the section element
Would make it a bit easier and still be semantic 🙂
yeah that's what made me think it wasn't quite the right thing 😅
oh awesome! so add padding to the nav and text then remove it at larger screen sizes and define the wrapper behaviours?
Yea that should be fine! Maybe even having a utility class, like "mobile-padding" or something. Add it to the items that need that room (like the nav and the text), then in your media query, remove the padding on large screen sizes
yeah that sounds good, i much appreciate both of your help! sorry if i explained anything in not enough detail or if it sounded like i wasn't taking in what anyone was saying by going on about that one wrapper class, i mustn't have been bringing across what i meant well there. I just thought there was a different way of doing it for some reason 😅, definitely learnt something there 😄
Haha you're totally fine! Good to ask questions :). I would have liked to play around with it more but it's tough on mobile. Wanted to at least help find one working solution though 😂
glad to hear that! for sure the best way to learn 😄, no worries at all! ay and you did just that, appreciate it!
You could use CSS variables for your padding values to avoid having repeated numbers in your code.
yeah i definitely could, thank you!
hm i just had to give it one more go, couldn't leave it alone 😅, and i got it to remove the scroll bar by removing a single pixel with
margin-left: calc(-2em - 1px);, i feel the fact i had to do that makes it a little hacky because the initial 2em should have worked in theory, what do you think? I updated the codepen if you'd like to give that a look.Hmm, for me I had to do -1em and I could get it to work
Which actually makes sense since the width is 100% - 2em (1em on the left and 1em on the right)
Wondering why that exact thing wasn't working for me earlier 😂, that's what I was trying but getting a weird scroll
It worked now though
yeah there's something strange with that one 😂, maybe it's because my wrapper's width is
width: calc(100% - 2em);? it's not removing a perfect percentage so the line up works weirdly?I mean it worked when I just tried it now on my mobile device!
Nice and center with a full width image
hmm i tried the same thing minimizing by browser window and it throws a scrollbar
this is so strange 😅
What in the world 😂😂😂
for real! 😂😂
How could our devices be getting something different! That's wild haha. Look, either way, if you found a way that's getting it done, give it a go!
yeah quite the unexpected 😅, yeah that's very true!
i'm honestly starting to think it's the fact we're on different browsers, never thought i'd see this haha, but yeah we found many ways, most of them work, that's all that matters there! Thank you again!
@croganm sorry for the ping, i thought you may be quite interested in this, i was talking to b1 about different layouts recently and it gave me a new view on the solution to something like the problem we were having in this post, rather than setting images to have 100vw and offsetting it or having mobile padding variables, how about something like this? https://codepen.io/deerCabin/pen/BavjbrZ
Yea that's a good way! It may cause some issues if you need to nest the full element in something for grouping purposes, but it's an effective way to target it 🙂
awesome, i appreciate the reply! that was a big lightbulb moment 😂, ah yeah i see what you mean, what would you recommend to fix the grouping problem?
Honestly, no clue 😂. b1 does a great job so I'm sure that solution works nearly every time. Normally I'd go with some thing that's always full width and use padding when needed. No idea why it wasn't quite doing the job in the original problem
You could also probably structure the html to always get it close enough
I'd honestly have the full element on the top level, then a secondary container inside of it with padding. It's basically what I am suggesting if I'm thinking about it
no worries 😄, yeah b1 was showing me quite a cool grid layout for something like this, it's here if you'd like to check it out! https://discord.com/channels/436251713830125568/1145499484588081195
i appreciate the insight of what could go wrong etc, thank you!