X theme mobile view and background images

Support
#1

On our client’s website they have a website where most of the information is on the homepage in different sections. Each section has a different background image that parallaxes into the next section but on a mobile device the images are statics and zoomed in so much so that most of them you can’t tell what they are. If you go to the theme options and toggle to the mobile version it shows the parallax effect with smaller images for a phone or mobile device.

Also at the bottom before the footer, it shows the overall page background image. Is there a way to reduce that area or change it to black?

#2

Hi @Mobloggy,

Thank you for writing in, that space at the bottom of the page where you can see the body background-image is the last content band margin-bottom, please set the margin-bottom of that content band to 0.

That background behavior is normal since your background-images are landscape-oriented, it needs to stretch (zoomed in) to cover the enlarge content-band on mobile. What you can do with that is to switch a portrait-oriented version of the background-image when the site is viewed on portrait devices.

That is possible with a media query CSS.

Media Queries for Standard Devices

Cheers!

#3

The last content band is already set to zero. I added the CSS code and it did nothing to the images. The mobile phone I’m testing on is iphone 7

#4

Hi @Mobloggy,

Try adding a class mbn to the last content band, that should remove the bottom margin.

No, don’t just add the CSS provided on that page and you don’t need to put everything, maybe just this:

/* Portrait */
@media only screen and (max-device-width: 767px) and (orientation: portrait) { 
	/*YOUR CUSTOM CSS RULE HERE*/
}

You need to formulate your custom CSS to apply a background-image on that size (on portrait).

Apply a custom class to each of your content band so you can easily target it with custom CSS.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Thanks,

#5

The mbn worked. Since I added mbn to the last content band class I can’t add another class for the background imge for that section.

I tried this css for the first section but I think I’m missing something:

/* Portrait */
.page-id-2 .site {
@media only screen and (max-device-width: 767px) and (orientation: portrait) {
background-image: url(‘https://latour-vail.com/wp-content/uploads/2014/08/Carbonara-Vail.jpg’);
}

#6

Hey @Mobloggy,

You can add multiple classes by separating them with space e.g if you want to give 2 classes one mbn and other let’s say last-content-band to a content band simply write it like this: mbn last-content-band now you can target the content band with the class last-content-band for the background image.

You can refer to the following thread as well https://stackoverflow.com/questions/8722163/how-to-assign-multiple-classes-to-an-html-container/38086762

Hope this helps!

#7

wht about the CSS I provided? Is it built right?

#8

Hello @Mobloggy,

Your custom css is incorrect:

/* Portrait */
.page-id-2 .site {
@media only screen and (max-device-width: 767px) and (orientation: portrait) {
background-image: url(‘https://latour-vail.com/wp-content/uploads/2014/08/Carbonara-Vail.jpg’);
}

The correct way of using the @media block in the css should be like this format:

/* General Style */
.element-class {
  /* some styling here */
}

/* Portrait */
@media only screen and (max-device-width: 767px) and (orientation: portrait) { 
     .element-class {
          /* some styling here */
     } 
}

To learn more about the @media css, please check this tutorial:

Hope this makes sense.

#9

I added this CSS which did change the image size a little bit but not much of the first image under the slider

/* Portrait */
@media only screen and (max-device-width: 767px) and (orientation: portrait) {
#home1 {
height: 150px;
width: 10%;
}
}

#10

Hi @Mobloggy,

I can see that CSS on the source code. Although, I don’t see id home1 added to any of the element on your homepage. If that is not added, I am not sure how it works as you explained above. Please clarify in case I missed something here.

Also note that forcing height and width is not recommended because it will stretch your image unproportionately.

#11

home1 is in the content band class section for the first section where it welcomes people to the restaurant. We are trying to reduce the image on mobile devices because it stretches the images already. On responsive and desktop views looks fine.

#12

Hello @Mobloggy,

Since home1 is added as a class, the CSS code needs to be updated.

Please refer to this example code in using a class or the ID in your CSS code:

/* using an ID */
#element-id {
  /* some styling here */
}

/* using a class */
.element-class {
  /* some styling here */
}

We would love to know if this has worked for you. Thank you.

#13

It made the image bigger not smaller

#14

Hi @Mobloggy,

Please take this as an example

/* Portrait */
@media only screen and (max-device-width: 767px) and (orientation: portrait) {
     .home {
         background-image: url(https://i.imgur.com/BTFwbCM.jpg) !important;
         background-attachment: fixed !important;  
     }
}

You need to have a portrait-oriented image if you want a perfect fit background-image on portrait mobile view.

Else, have a background-image where the focused object is in the middle, that way it will not out of focus when viewed on portrait mobile view.

Cheers!

#15

It made the image bigger

#16

Hi @Mobloggy,

Please address these couple of issues.

You can try this as a sample portrait image.

Thanks,

#17

Does this mean that by changing the background image in the css code we will have different images for the desktop and mobile website?

#18

Hi @Mobloggy,

Yes it can as long as you use the correct selector, for example if you wish to change an existing section background , let’s say that section has ID of my-id and a background is applied to lower layer, then the needed selector would be #my-id .x-bg .x-bg-layer-lower-image, then the CSS would be

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
     #my-id .x-bg .x-bg-layer-lower-image {
         background-image: url(https://i.imgur.com/BTFwbCM.jpg) !important;
     }
}

I recommend checking this https://community.tealiumiq.com/t5/iQ-Tag-Management/How-to-Determine-the-CSS-Selector-of-an-Element/ta-p/28227 about selectors.

It all depends on where or what background you’re trying to override :slight_smile:

Thanks!

#19

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.