Image on mobile version is zoomed in

BB Theme
1

Hi there,

The image on my homepage is fine on desktop however as soon as I go to the mobile version the image is extremely zoomed in. How can I reduce the image size for mobile so that you can see the whole image rather than an extreme close up?

http://robertmeijerplumbing.com.au/wordpress/

Thanks,
Courtney

2

Hey Courtney,

Could you try the CSS snippet below and see if it’s what you’re looking for. :slight_smile:

@media screen and (max-width: 1105px) {
 .fl-builder-content .fl-row-content-wrap {
    background-size: auto !important;
 }
}

Thanks!

KC

3

Hi KC,

Thanks for your quick response. I have tried the css snippet however the image is still extremely zoomed in. This is how I pasted the code in:

/*
Theme Name: Beaver Builder Child Theme
Theme URI: http://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: http://www.fastlinemedia.com
template: bb-theme
*/

/* @media screen and (max-width: 1105px) {
.fl-builder-content .fl-row-content-wrap {
background-size: auto !important;
}
}
*/

Is that correct? Nothing seems to have happened.

Thanks,
Court

4

Hey Courtney,

Please paste the exact code below into the file. If you’re still having issues, share a temp admin access to your Website and we’ll do it for you. :slight_smile:

/*
Theme Name: Beaver Builder Child Theme
Theme URI: http://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: http://www.fastlinemedia.com
template: bb-theme
*/

@media screen and (max-width: 1105px) {
.fl-builder-content .fl-row-content-wrap {
background-size: auto !important;
}
}

Thanks!

KC

5

[Content Hidden]

6

Hey Court,

Please replace the CSS snippet with the below. I’ve tried zooming out the image a bit but it doesn’t look nice. Check out the screenshot attached.

@media screen and (max-width: 1105px) {
 .fl-builder-content .custom-bg-img-tap .fl-row-content-wrap {
   background-size: auto !important;
   padding: 0px !important;
 }
}

Thanks!

KC

7

Thanks KC! You are right - that is too zoomed in.

I tried the new snippet but nothing changed.

Sorry is the below correct?

/*
Theme Name: Beaver Builder Child Theme
Theme URI: http://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: http://www.fastlinemedia.com
template: bb-theme
*/

@media screen and (max-width: 1105px) {
.fl-builder-content .fl-row-content-wrap {
background-size: auto !important;
padding: 0px !important;
}
}

Thanks!
Court

8

Hey Court,

Just worked out a responsive CSS snippets for you. I’ll paste it in for you. Refer to the code below for your reference. I’ve also added a custom class “custom-bg-img-tap” on the row of the background image.

@media screen and (max-width: 1105px) {
 .fl-builder-content .custom-bg-img-tap .fl-row-content-wrap {
   background-size: auto !important;
 }
}

@media screen and (max-width: 1105px) {
 .fl-builder-content .custom-bg-img-tap .fl-row-content-wrap {   
   padding: 80px 400px 10px 30px !important;
 }
}

@media screen and (max-width: 768px) {
 .fl-builder-content .custom-bg-img-tap .fl-row-content-wrap {   
   padding: 28px 400px 10px 30px !important;
 }
}

@media screen and (max-width: 726px) {
 .fl-builder-content .custom-bg-img-tap .fl-row-content-wrap {   
   padding: 0px 400px 0px 0px !important;
 }
}

@media screen and (max-width: 652px) {
 .fl-builder-content .custom-bg-img-tap .fl-row-content-wrap {   
   padding: 0px 210px 0px 0px !important;
 }
}

@media screen and (max-width: 436px) {
 .fl-builder-content .custom-bg-img-tap .fl-row-content-wrap {   
   padding: 0px 110px 0px 0px !important;
 }
}

@media screen and (max-width: 333px) {
 .fl-builder-content .custom-bg-img-tap .fl-row-content-wrap {   
   padding: 0px 50px 0px 0px !important;
 }
}

Thanks!

KC

9

Wow!! Thank you SO much!! :slight_smile: I have never made a website before and I am just helping my dad out so this is a huge help!

Sorry I have one more question:

Is there anyway to make the contact now button in line with the rest of the text?

Thanks again,
Court

10

Hey Court,

I’ve made some changes to contact now button. Let me know if this is what you want. For your reference, I’ve just used the 2 columns layout and adjusted the margin a bit on the button.

Thanks!

KC