Image placement screwing up on mobile devices.

cxam · June 2018

Hi, I've got a section on my homepage wich is divided in halfs. On one of them I show a picture and on the other half I show some text. On computer it works perfectly as shown on the first screenshot

But on mobile the image gets cut in half when it should get resized to fill the screen. The second screenshot shows how it's seen on a smartphone:

Pablo · June 2018

Hi,
Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co
thanks

cxam · June 2018

Hi. The page is http://jimenezortodoncia.com/main the issue I'm talking about is in the home page.

Pablo · June 2018

Hi, you have few HTML errors, fix it up.

Use this Custom CSS code and tell me if it's ok

body.page-id-15 .vc_custom_1529590766456{
	background-position:70% 0% !important;
	background-size:cover; 
}

Thanks.

cxam · June 2018

hi, thanjk you for your help however, the image is still getting moved, I want the image to show the face of the woman, so it should always display the center of the image (in small screens the face gets cut in half in spite of being resized to try and display as max as the image possible). The way I did this is puttin the image as the background of a 1/2 column then setting a defined pixel height as the main element of the section (just in case this info helps you sort the problem). Thanks.

Pablo · June 2018

Please fix a HTML errors first.

Thanks

cxam · June 2018

Hi, I'm not getting the errors you're telling me about, can't find them.

Pablo · June 2018

1) This is somewhere near form.

http://prntscr.com/jzf8o3

2) You have to add to this picture(column with picture) CSS class

I can't do it, because every time you save it changes class.

background-position:center

Thanks

cxam · June 2018

I'm checking on that HTML, however the code you provided me doesn't seem to work, it still does gets cut like it was before the CSS code.

Pablo · June 2018

You have to declare a Custom CSS Class in this picture, because everytime you save your Visual Composer, your image container is changing his ID (http://prntscr.com/jzu6h6)

We cannot add/change CSS code because of this.

Thanks.

cxam · June 2018

Oh, I see, I'm sorry I tried doing that, as you see in the images, however the changes are not taking place, chrome inspector shows me that the class has been applied succesfully, the images refer to the custom css section of the theme options, visual composer options and chrome inspector:

Pablo · June 2018

Hi,

Please use this CSS code.

.mface_section > div.vc_column-inner{
background-position:center top !important;
}

Thanks

cxam · June 2018

Thanks, a lot, that fixed the issue.

Image placement screwing up on mobile devices.

Comments