Is there a way to use a different crop for images in mobile?

Shapely
1

The text overlaying my images in the full website works well, but, when rendered in mobile, the text becomes unreadable because it overlays a different part of the background image. Is there a way to use a different crop of the same image for the mobile version so that the text overlays the image properly? Any help is certainly appreciated.

Site is: http://earthrisesolutionsllc.com/

2

Yes once you have cropped an image (I also cropped it for you so you can upload it on your wordpress site), locate your css file (“style.css”) and open it for edit:

  1. Then in style.css search for “.cover.fullscreen” (You can also search by pressing CTRL + F)

  2. When you have located it you will find this code:

@media all and (max-width: 767px) {
	.cover.fullscreen {
		height: auto;
		padding: 0;
	}
}
  1. Add the following lines to the code:
@media all and (max-width: 767px) {
	.cover.fullscreen {
		height: auto;
		padding: 0;
		background-position: center;
		background-image: url("https://i.imgur.com/TIFIG5l.jpg"); /*Link of new image*/
		background-repeat: no-repeat;
		background-size: cover;
	}
}

**** Extra tips:
To make text more visible when scrolling over image on desktop do the following:

  1. Search in “style.css” (CTRL + F) for “.image-bg h3, .image-bg h1”

  2. You will find this code:

.image-bg h3, .image-bg h1 {
    color: #fff;
}
  1. Add the following line to that code:
.image-bg h3, .image-bg h1 {
    text-shadow: 1px 1px 20px black;
    color: #fff;
}
3

HI there

The only thing I want to add here is that not recommended to modify theme files for CSS changes, just add them in the Appearance > customize > additional CSS, all your changes will lost after update

4

This is all great help, @nkulic, especially the text shadow point out. Thanks!

However, it doesn’t really get to the heart of the matter, which is that the layout of this photo in the full website is essentially landscape, but it renders in mobile as portrait. Is there a way to use a different photo or different crop for the different versions of the site?

Of note, I added the code you suggested for ‘@media,’ as additional CSS, and it didn’t appear to change anything. Perhaps because this is a parallax section image, and not a background image, so I’m not sure the pointer is to the correct image. (Still new at this stuff, and learning bit by bit.)

5

Actually, if I could just control the width of the image so that the width in the “background full” image position renders the same as the “background small” image position, I think it would be ok. I assume this is controlled by the Additional CSS code you suggested, and I just need some small edit to manage the correct parameters - just don’t know what they are.

6

Hi there

You can use background-position CSS property to control image appearance for mobile screens:
https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position

instead of center, you can use different positions in this code

@media all and (max-width: 767px) {
.cover.fullscreen {
height: auto;
padding: 0;
background-position: center;
background-image: url(“https://i.imgur.com/TIFIG5l.jpg”); /Link of new image/
background-repeat: no-repeat;
background-size: cover;
}
}

7

Specifically for your situation you can simply move background image by a horizontal line, results are in attached images for desktop and mobile view.

In style.css search for “.cover.fullscreen” and then edit the “background-position: center;” to:

@media all and (max-width: 767px) {
	.cover.fullscreen {
		height: auto;
		padding: 0;
		background-position: 100% center;
		background-image: url("https://i.imgur.com/TIFIG5l.jpg"); /*Link of new image*/
		background-repeat: no-repeat;
		background-size: cover;
	}
}
8

@Nkulic, thank you for all your effort, its highly appreciated but I want to add one thing, please don’t suggest to edit any theme files, these CSS rules can be overridden in Appearance > customize > additional CSS :wink: