Return to previous page

How to get images centered on mobile - by FuegoHD

This topic has 9 replies, 2 voices, and was last updated 8 years, 6 months ago ago by Eva Kemp

FuegoHD

Participant

October 7, 2015 at 21:16

Hi again, so the images in my parallax homepage are not centered on mobile devices. At first we had the issue of the images not showing up due to the glitch in the matrix(Chrome and ultimate add-ons were acting up). Switch the row setting from “fixed position” to “move with content” and added a little magical code to theme options>custom css>mobile fixed that issue. sort of.

But now I’m having the issue that my images are not centered or resizing “responsive” to the mobile devices screen.

Galaxy s5/Android: you can see about 25% of the left side of the images, most of the text.
Turn the device to landscape and you can see the left half the images, text is fine.

Iphone 5: no images, half the text.
Switch to landscape and still no images but but text is fine.

Please, contact administrator
for this information.

#92373 Copied Theme version: parallax

8 Answers
Eva Kemp

Support staff

October 8, 2015 at 09:54
Hello,

I’ve added this code in CSS block of Visual Composer editor in Parallax page:
```
@media (max-width: 480px) {
    .wpb_text_column.wpb_content_element {
        width: 380px;
}}
```
Please check text display on the page now.
Concerning the images, as you can see our demo site https://www.8theme.com/demo/woopress/parallax/ displays them the same way. The reason is the padding values that are set in row settings for background images.

Regards,
Eva Kemp.
#92443 Copied
FuegoHD

Participant

October 8, 2015 at 15:34

Actually I have been playing around with all the settings so you didn’t get to see how bad it really was. On the current setting (vertical parallax on scroll) the images stay centered on mobile, and you can now see 50% center of the image. That is a little better than the previous/preferred setting (Multilayer vertical parallax) which shifted the images to one side and you can only see the left 25% of the image.

In reality, the issue is the site is not as “responsive” as it should be. It should resize the images to fit the screen like the slider does. And when you load in portrait the turn the device to landscape the images stay cut at the same place the portrait screen cut them at. Instead it should have re-fit or “adapt” to the new screen size, again like the slider does.

In multilayer vertical parallax, the text adapts to the new screen size when the phone is tilted from portrait to landscape, yet the image stays cut in half. However if you load the site while in landscape it loads the images to that screen size perfectly and you can see the whole image.

When set to “vertical parallax on scroll” the images load how you saw them on my site and how they load on the demo site, in which both sides get cut off and you can only see the center 50% of the image. The only good thing in this setting is that when you switch to landscape the images adapt to the new screen.

It would be great if the theme would just resize the images to fit the screen in any setting, that way the images would not get cutoff. Instead we need to design our site to ensure the important part of the image is in the center so mobile can see it. Then on desktop and notebook there will be wasted space on the sides.

I know what I am asking will take some serious coding and not just a magical snippet, but in reality that would be what makes the site truly “responsive”. Because at the moment it isn’t really responding.

Also, in row settings>background tab, at the bottom it has the “activate on mobile” selector. When selected “yes” the parallax effect is still not active on mobile.

You mentioned padding values… Will modifying these values fix everything I mentioned?

Either way thanks for your replies you guys are great help. Thanks to you I think I can still have a great looking site, we just have to be happy with what does work and not use the parts that do not.

Regards,
Ivan Fuego

#92567 Copied Theme version: parallax, kids, boxed, custom

FuegoHD

Participant

October 8, 2015 at 15:44

Sorry I did not realize I was writing for so long. That post is too long.

#92569 Copied
Eva Kemp

Support staff

October 9, 2015 at 11:18
Hello,

We’ll forward this issue to our developers.
As a temporary fix you can add this code in Theme Options > Custom CSS > Custom CSS for mobile:
```
.upb_row_bg {
     background-size: 100% 100% !important;
}
```
Please note images may be distorted a bit on mobile in this case.

Regards,
Eva Kemp.
#92764 Copied
FuegoHD

Participant

October 12, 2015 at 03:01

Thanks but that makes it worse. I’ll just create smaller images with the main subject in the center so it won’t matter that the sides get cut off.

#93105 Copied

Eva Kemp

Support staff

October 12, 2015 at 12:06

Hello,

Do you need further assistance from us?

Regards,
Eva Kemp.

#93216 Copied

FuegoHD

Participant

October 12, 2015 at 12:17

Is there a way to get the parallax to work on mobile?

If not, is there a code to make the image resize to fit the screen? But not like the code above, which squeezed the image horizontally, but instead resize the entire image proportionally.

#93220 Copied
Eva Kemp

Support staff

October 12, 2015 at 13:00
Hello,

The images can be set correctly using additional css code, but the text content will be shown incorrectly.
Try to add this code in Custom CSS for mobile:
```
.upb_row_bg {
   background-size: contain !important;
}
h1 {
    font-size: 15px !important;
    line-height: 15px !important;
}
hr.horizontal-break, hr.break {
   margin: 10px auto !important;
}
```
Regards,
Eva Kemp.
#93234 Copied
Viewing 9 results - 1 through 9 (of 9 total)