Mobile version is too zoomed in

BB Theme
1

Hi there,

Do you know how I can the mobile version less zoomed in as they current display is large and the font and image do not scale down to the mobile size. I can send a screen shot through to help describe it and I can send through my FTP and wordpress details. The web page is:

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

Thanks,
Courtney

2

Hey Courtney,

I believe we have discussed it earlier on this thread. However, I think I have a workaround for you. Since the background image is kinda huge, let try this way. We will duplicate the row with the background image and hide the larger image on mobile view. Then display a smaller sized image on mobile view using the row settings as shown on the screenshot below. Also, please remove the CSS snippets provided earlier. If you need help with this, go ahead and share temp admin access to your site. We’ll see what we can do for you there. :slight_smile:

http://imgur.com/l8wsgcD

Thanks!

KC

3

[Content Hidden]

4

Hey Courtney,

I’ve duplicated it for you and made some adjustments to it. You could try editing the image on mobile view so it fits better there? Let us know how it goes. :slight_smile:

Thanks!

KC

5

Thank you so much KC! That is much better! :slight_smile: I will play around with the image and will let you know if I have any issues!

Thanks again for your quick response!

Cheers,
Court

6

Hey Courtney,

Sure thing, I will keep this thread open until you’re done with it.

Thanks!

KC

7

Thanks!

I actually do have another question - I just uploaded a much smaller image so that it would view better however once I published the changes the text moved out of place so it does not sit within the image anymore - so the word ‘mobile’ is now sitting above the image in a white space and the 'no hidden costs. Reliable 24/7 is too large. The ‘contact now’ button is also not in the right place and is sitting below the image in a white space. How do I correct this?

Sorry to ask so many questions!

Thanks,
Court

8

Has it got something to do with the size of the font or the image?

Thanks,
Court

9

Hey Courtney,

Please check on the changes, I’ve changed the wording there a bit using the header module and some adjustments. As for the image I think it’s kinda difficult to explain. Could you try resizing your image around 600 width x 800 height with the tap head on the center? I think that should improve it.

Thanks!

KC

10

Wow! That looks much better! I currently do not have photoshop on the computer that I am working from so will resize the image tomorrow and will let you how I go!

Thanks,
Court

11

Hey Court,

No problems at all! :slight_smile: Great job on the site.

Thanks!

KC

12

Thank you! :)It’s taken me a LONG time! Sorry KC I thought I would give it a go and duplicate the row below the image the one with the text ‘Your local, reliable and professional plumber.’ and make this smaller for mobile so I duplicated it and tried resizing the font which kind of worked but it still sits across two lines and the row itself is more like a square because the text is taking up so much room. How do I edit the font to make it look more presentable? What am I missing? I tried resizing the font in the textbox but there still something wrong.

13

I forgot to mention I am referring to the view on mobile :slight_smile:

14

Hey Courtney,

I’ve just changed the text module into a heading module which I think will look much better. Feel free to play around with the font style and size. Let us know if you need anything further. :slight_smile:

Thanks!

KC

15

Yes, it does! Thank you!! It looks a million times better!! :slight_smile:

16

Hi KC,

I have now updated the mobile image to 600x800 which looks great! How can I make the ‘Contact Now’ button align on the left? Like the below:

ROBERT MEIJER
PLUMBING

No hidden costs.
Reliable. 24/7.

Contact Now.

Instead of the current view:

ROBERT MEIJER
PLUMBING

No hidden costs.
Reliable. 24/7.

    Contact Now.

Thanks,
Court

17

Hey Court,

Sorry, I’m not getting this. Do you mind sharing a screenshot on what you are trying to achieve? You can upload it to imgur and paste the link here.

Thanks!

KC

18

Hi Kc, yep sure link below :slight_smile: http://imgur.com/TpzYZTI
Thanks!

19

Hey Courtney,

Try the CSS snippet below and see if it’s what you’re looking for. Just insert it into Appearance > Customize > Code > CSS Code

@media (max-width: 600px) {
.fl-module-button .fl-module-content .fl-button-left {
  text-align: left;
}
}

Thanks!

KC

20

Thanks KC! That did the job!! :slight_smile: