SVG below rich text in hero banner header in mobile

SOLVE
Highlighted
Occasional Contributor

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: 

snip1.PNG 

 

 

 

 

 

 

 

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:

 

snip2.PNG

 

Does this make sense? Thanks!!

 

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Regular Advisor | Platinum Partner

@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

dennis
Reply
0 Upvotes
10 Replies 10
Regular Advisor | Platinum Partner

@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.  

dennis
Occasional Contributor

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? 

Reply
0 Upvotes
Regular Advisor | Platinum Partner

@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/

dennis
Reply
0 Upvotes
Occasional Contributor

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!

Reply
0 Upvotes
Regular Advisor | Platinum Partner

@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.

dennis
Reply
0 Upvotes
Regular Advisor | Platinum Partner

@MBMinor,

forget the second question,

display: flex should be prefixed.

here is an article on prefixes

dennis
Reply
0 Upvotes
Occasional Contributor

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- 

cap2.PNG

And how it appears on mobile size (which is exactly what I'm looking for!) - 

cap1.PNG

 

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. 

 

cap3.PNG

 

Reply
0 Upvotes
Regular Advisor | Platinum Partner

@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

dennis
Reply
0 Upvotes
Occasional Contributor

-____-

 

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

 

Thanks so much for your help!!!

Reply
0 Upvotes
Regular Advisor | Platinum Partner

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

dennis