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
briancross
briancrossβ€’15mo ago
No description
briancross
briancrossβ€’15mo ago
Like this?
snxxwyy
snxxwyyβ€’15mo ago
yeah that'll be it i feel it's something simple i've overlooked πŸ˜…
briancross
briancrossβ€’15mo ago
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.
snxxwyy
snxxwyyβ€’15mo ago
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 πŸ˜„.
briancross
briancrossβ€’15mo ago
I’m not sure exactly what you mean. Why don’t you add padding or margin to the text or nav as needed?
snxxwyy
snxxwyyβ€’15mo ago
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?
No description
croganm
croganmβ€’15mo ago
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?
snxxwyy
snxxwyyβ€’15mo ago
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?
croganm
croganmβ€’15mo ago
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 πŸ™‚
snxxwyy
snxxwyyβ€’15mo ago
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?
croganm
croganmβ€’15mo ago
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
snxxwyy
snxxwyyβ€’15mo ago
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 πŸ˜„
croganm
croganmβ€’15mo ago
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 πŸ˜‚
snxxwyy
snxxwyyβ€’15mo ago
glad to hear that! for sure the best way to learn πŸ˜„, no worries at all! ay and you did just that, appreciate it!
briancross
briancrossβ€’15mo ago
You could use CSS variables for your padding values to avoid having repeated numbers in your code.
snxxwyy
snxxwyyβ€’15mo ago
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.
croganm
croganmβ€’15mo ago
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
snxxwyy
snxxwyyβ€’15mo ago
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?
croganm
croganmβ€’15mo ago
I mean it worked when I just tried it now on my mobile device!
croganm
croganmβ€’15mo ago
No description
croganm
croganmβ€’15mo ago
Nice and center with a full width image
snxxwyy
snxxwyyβ€’15mo ago
hmm i tried the same thing minimizing by browser window and it throws a scrollbar
No description
snxxwyy
snxxwyyβ€’15mo ago
this is so strange πŸ˜…
croganm
croganmβ€’15mo ago
What in the world πŸ˜‚πŸ˜‚πŸ˜‚
snxxwyy
snxxwyyβ€’15mo ago
for real! πŸ˜‚πŸ˜‚
croganm
croganmβ€’15mo ago
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!
snxxwyy
snxxwyyβ€’15mo ago
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!
snxxwyy
snxxwyyβ€’15mo ago
@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
croganm
croganmβ€’15mo ago
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 πŸ™‚
snxxwyy
snxxwyyβ€’15mo ago
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?
croganm
croganmβ€’15mo ago
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
snxxwyy
snxxwyyβ€’15mo ago
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!
Want results from more Discord servers?
Add your server