SVG below rich text in hero banner header in mobile
SOLVE
Hello!
I'm trying to balance our hero banner for mobile, and having issues with ensuring that the SVG I'm using in the background is correctly placed below the rich text header. Does anyone know how to correctly format this?
For reference:
This is how the header sits currently on responsive websites (full screen). This is correct. What I'd like to do is take that SVG on the right hand side and drop it below the header text on smaller screens. Here's how it looks now on mobile:
SVG below rich text in hero banner header in mobile
SOLVE
@MBMinor , unsure it was cut off, but it looks like you are missing the last } to close the media query. unclosed, it is going to affect everything under it
yep. what i would do is add your svg into that empty span6 div you have on the right. give the image a class and hide it on desktop size. dont hide the span6 as it looks like you are employing it for spacing.
probably would adjust the svg accordingly for crop. have a lot of empty space on the left.
when you determine you breakpoint, remove the background image, make sure you have a background-color consistent with the blue in the svg, unhide the image(will need to play with sizing) and make sure to set your flex-direction to column.
in addition, make sure to add vendor prefixes to the css.
SVG below rich text in hero banner header in mobile
SOLVE
Awesome, thanks for being a wealth of knowledge thus far.
Okay, so I've determined how to get the mobile right by adding your media reference into the CSS code in the content-section (which is where that bg-img tag is reading from).
Here's how that looks-
And how it appears on mobile size (which is exactly what I'm looking for!) -
Now, here is the problem - it threw the rest of my CSS out of whack, including menus, etc. I restored to the original, but is there a way to limit that @media reference to JUST smaller media-sized? Do I have to do another @media reference for each size? Not sure how to progress from there. Here's what desktop-sized looks like now.
SVG below rich text in hero banner header in mobile
SOLVE
@MBMinor , unsure it was cut off, but it looks like you are missing the last } to close the media query. unclosed, it is going to affect everything under it