SVG below rich text in hero banner header in mobile

[MBMinor]

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:

Does this make sense? Thanks!!

[dennisedson]

@MBMinor , 

could you provide a link?  

on a very high level, you will determine your mobile breakpoint and add a media query to your css

here is a simple pen to illustrate it.  

[MBMinor]

Hey Dennis! Here's a link to the test site currently. 

https://discover.cobbtechnologies.com/hometest-1-1

I figured breakpoints would play a role, so should I determine each based on mobile and tablet sized? 

[dennisedson]

@MBMinor,

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.

my go to:  https://autoprefixer.github.io/

[MBMinor]

Thanks for the advice, Dennis! 

I also stumbled across this, was wondering if you think it'd work. 

If I added a hero-img class into the CSS with the following breakpoints:

========================================================================== */

.hero-img {
  background-size: cover;
}

@media (max-width: 1139px) {
    
    .hero-img {
      background-repeat: no-repeat;
			background-size: 120%;
			background-position: top right;
  }

@media (max-width: 767px) {

      .hero-img {
      background-repeat: no-repeat;
			background-size: 180%;
			background-position: top right;
}

@media (max-width: 479px) {
}

Also, could you let me know what you mean by vendor prefixes? Sorry - I'm 100% self-taught and that one went over my head haha. 

Thanks so much for your assistance thus far, though!

[dennisedson]

@MBMinor,

forget the second question,

display: flex should be prefixed.

here is an article on prefixes

[MBMinor]

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. 

[dennisedson · Accepted solution]

@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

[MBMinor]

-____-

Good catch! And that's why I could never be a developer, haha. 

Thanks so much for your help!!!

[dennisedson]

@MBMinor , you seem to be doing a good job.  keep it up 🙂

[dennisedson]

@MBMinor, if you do that, you will need to add a height to the container.  the background image is only going to be as large as its container.