[imaginemachineParticipant]

Hi,

few questions –

1. Is there a way that the main image that fills the whole main page, when going mobile will stay in the same proportions and not cut ?

2. To fill the whole page, is it better to use a slider with no animation?

3. What should be the size of the main picture ?

This is the site blog.intami.co.il

[JadeModerator]

Hi there,

#1 Please add this code in the customizer:

@media (max-width: 480px) {
    .home #x-section-1 {
       background-size: contain !important;
       padding-top: 0 !important;
    }
}

#2 If the page you are working on uses a Blank template, then you may just use an image to fill the entire width considering that the image dimension is enough to fill the site width. Or you may also set it as a background for a section.

#3 It varies on which screen sizes you want to support but you may start off with an image of 1920px width.

Hope these helps.

[imaginemachineParticipant]

Thank you for that.

1. well now it keeps the proportions but on portrait it looks bad
2. I did it as a background for a section
3. 1920 ? and what hight so it can fill the screen without the blank space that exists at the moment ?

[RadModerator]

Hi there,

1. Yes, that’s why you need different images for each device. The desktop is a big screen (landscape) and mobile is small (portrait). It’s only applicable to use the image for each device. You can utilize multiple sections (each section for each device) with HIDE BASED ON SCREEN WIDTH option enabled. Then apply different image for each background (eg. landscape vs portrait).

Imagine playing a vertical video on youtube, black bars appear. The same goes for background images, but there is size option (cover and contain). Contain is where negative spaces appear similar to video black bars, and the cover is where clipping occurs. You can’t force the width and height equal to the device size, example your image is 1024×768, but you’re forcing it to 480×1024 then it’s going to be stretched.

2. Are there any issues setting them as background?

3. It depends on what device, devices doesn’t have equal sizes like I explained on #1. Clipping or negative spaces will still appear, or stretch it if you wish (eg. background-size: 100% 100%; ).

Thanks!

[imaginemachineParticipant]

Well –

1. Where do I do that ? I don’t understand what is the “proper, default, normal” size of pic I should put if I want to at least make it full screen shown all the image on desktop at least !!!! at the moment no matter what I do, it looks cut off.

how and where do I do what you suggest ? “You can utilize multiple sections (each section for each device) with HIDE BASED ON SCREEN WIDTH option enabled. Then apply different image for each background (eg. landscape vs portrait).”

3. I don’t want to streach it. I just want to know what size should I choose so that it will show completly and on bigger devices it will have a gap but at least it will show completley

[ChristianModerator]

1. What is your desktop’s screen resolution? If it’s 1920 x 1080px, then you should use that image as image size.

Hide Based on Screen Width, is an option available in Sections, Rows and the Gap element. With that, you can create a view for desktop, laptop, tablet and mobile. If you enable it for mobile, it will hide your section on mobile devices and show it on desktops, laptops and tablets (see attachment).

3. If you have important information in your image, you should not use it as background and instead, use the Image element.

Thanks.

[Author]

Posts