Mobile Site Images Full Frame - Support | Kriesi.at

Tagged: ismael, josue, kriesi, urgent, yigit

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
June 7, 2017 at 3:06 am #804785
Jasmer
Participant
Hi,

I have a consistent problem with Enfold’s mobile site.
The landscape images within color sections are resized and cropped automatically.
I don’t want this to happen.

I tried the following for example:

I apply the Section ID home-slider-image to the color section.

Then I added this CSS and experimented with the numbers.
```
@media only screen and (max-width: 767px) {
#home-slider-image .av-parallax-inner.main_color.avia-full-stretch {
    position: relative;
    top: -200px;
    background-size: contain !important;
}} /*home slider image + uncrop width*/

@media only screen and (max-width: 480px) {
#home-slider-image {
    background-position: 50% 0%!important;
    background-attachment: scroll!important;
}}
```
The above I am sure is incorrect.
It leaves a huge white space under the photo AND it does not keep the top of the image flush against the mobile header on all devices (e.g. iPhone 6 vs iPhone 7 Plus).
See screenshot.

What is the simplest formula for keeping the photos the same dimensions / full frame on the mobile site?

Is there one standard CSS which tells the mobile site “Don’t change any of my photos ever”?

I would like to know the CSS to change these images individually on the mobile site.
and
I’d like to know the CSS to change all of the images, mobile site wide if possible.

Thank you,

Jas
- This topic was modified 7 years, 5 months ago by Basilis.
June 8, 2017 at 9:37 am #805483

Jasmer
Participant

Hi guys!

I know you are crazy busy, but I am hoping to launch this site before the weekend. I’m sure it is an easy fix. It’s urgent.

Help!

Thanks,

Jas

June 9, 2017 at 2:23 pm #806067
Yigit
Keymaster
Hi Jas,

Color Section height changes depending on the screen size and background image’s proportions are not always the same with color section. I think for now the best solution would be replacing background image on mobile to a one with more spaces on both top and bottom using following code
```
@media only screen and (max-width: 767px) {
#home-slider-image .av-parallax-inner.main_color.avia-full-stretch {
    background-image: url(URL_TO_YOUR_IMAGE_HERE);
}}
```
Best regards,
Yigit
June 9, 2017 at 10:48 pm #806240
Jasmer
Participant
Hi Yigit,

I need one thing, to make the all the landscape images on my site to be full frame with no giant white space below the image. (See screenshot in Private Content below) I do not to replace the images. It takes forever to find excellent images. There has to be way as this has been successful on other sites.

This is not just about one image. I need others adjusted. Please look at the other images listed below (in Private Content) to see what I am talking about. This is more than a width problem. People’s heads are cut off, all the people don’t fit in the photo, etc.

Perhaps we also need to use CSS to resize the height of the Color Section or use a different element. This is a problem on almost all of my sites. I would like to find a permanent solution for this so I don’t have to bother you guys with this problem on every site.

Thank you so much for your help Yigit.

As I mentioned this CSS below, worked to some degree, but still with problems. I put the CSS back on the site so you can see the problem when you go to the site on your mobile device. The CSS below worked for another site with the similar image dimensions. (See Private Content below for the other site.)
```
@media only screen and (max-width: 767px) {
#home-slider-image .av-parallax-inner.main_color.avia-full-stretch {
    position: relative;
    top: -200px;
    background-size: contain !important;
}} /*home slider image + uncrop width*/

@media only screen and (max-width: 480px) {
#home-slider-image {
    background-position: 50% 0%!important;
    background-attachment: scroll!important;
}}
```
- This reply was modified 7 years, 5 months ago by Jasmer.
June 12, 2017 at 4:25 pm #806940
Victoria
Inactive Moderator
Hi!

Which is the page with giant whitespace? It is not clear from the screenshot. I do not see that whitespace, I checked on my cellphone. It loos fine. Could you clear the cache or check on another device, and see it the whitespace is still there.
What do you mean by full fame photo? Show full image?

Cheers!
Victoria
- This reply was modified 7 years, 5 months ago by Victoria.
June 13, 2017 at 4:11 am #807191
Jasmer
Participant
Victoria,

I just added the CSS back so you can see. I commented it out because it didn’t work. The large white space is on the home page now just below the top image.
```
@media only screen and (max-width: 767px) {
#home-slider-image .av-parallax-inner.main_color.avia-full-stretch {
    position: relative;
    top: -200px;
    background-size: contain !important;
}} /*home slider image + uncrop width*/

@media only screen and (max-width: 480px) {
#home-slider-image {
    background-position: 50% 0%!important;
    background-attachment: scroll!important;
}}
```
The other images I need CSS to apply to are below.

Thanks,

Jas
June 15, 2017 at 10:21 am #808486

Victoria
Inactive Moderator

Hi Jas,

In most cases parallax sections do not work on mobile and are very hard to be adjusted. I would recommend, hiding them and building a section to show on mobile without parallax, just image, text and button if you need. This can be done with a color section, or some slider.

If you need further assistance please let us know.
Best regards,
Victoria

June 15, 2017 at 10:21 am #808487

Victoria
Inactive Moderator

Hi Jas,

In most cases parallax sections do not work on mobile and are very hard to be adjusted. I would recommend, hiding them and building a section to show on mobile without parallax, just image, text and button if you need. This can be done with a color section, or some slider.

If you need further assistance please let us know.
Best regards,
Victoria

June 15, 2017 at 10:36 am #808495

Jasmer
Participant

Victoria,

I need to center the images at the very least. But here is the deal, I have done this before on a couple of posts. I just can’t seem to get this one. There is a way to do it. Would you draw Kriesi, Yigit, Ismael or Josue’s attention to see if they might have some ideas please? I would REALLY appreciate it.

I have got to get this site up asap. I would appreciate if you could consult with your colleagues on this. Thank you.

https://kriesi.at/support/topic/center-slider-image-on-mobile-site/

June 15, 2017 at 10:41 am #808496

Jasmer
Participant

Here’s two there of my similar posts.

https://kriesi.at/support/topic/image-center-problem/

https://kriesi.at/support/topic/background-image-move-left-on-mobile/

June 19, 2017 at 12:29 pm #809732

Jasmer
Participant

This post has gotten too confusing and no one is answering it so close topic. Thanks

June 19, 2017 at 7:53 pm #809924

Basilis
Inactive Moderator

Hi,

I will do, we are sorry you feel like that.

Best regards,
Basilis
Author

Posts