Mobile use

[joshua lotzenhiser]

I was wondering if there is a way to set up a smaller image on the front page hero section for mobile use.

Thanks!

[Bill Robbins]

Hello Joshua,

Great question. Some images work well being cropped resized down, especially ones where the main focus is in the center of the image. But you can specify a specific image for smaller screen sizes.

I would recommend installing a plugin called Style Buddy. It adds a box to every page/post where you can add in custom styling. Once that plugin is activated, edit the page where you’d like to have a separate image. Go to the styling box that the Style Buddy has added for you and paste this there:

@media only screen and (max-width: 768px) {
	
	body #hero-section {
		background-image: url(https://yoursite.com/tablet.jpg);
	}
	
}

@media only screen and (max-width: 520px) {

	body #hero-section {
		background-image: url(https://yoursite.com/phone.jpg);
	}

}

That will create an opportunity for you to have a separate image for you tablet sized displays and phone ones. To add the specific images, upload them in your media library. Once the upload is complete, click the edit link. On the screen that opens up, look on the right hand side for the file URL. Copy that URL and then replace either the http://yoursite.com/tablet.jpg or http://yoursite.com/phone.jpg depending if it’s for a tablet or phone and then update your page. That should let you replace the image in the correct screen sizes.

If you don’t need a separate phone size, you can delete the bottom style.

Let me know if you have any questions,
Bill

[joshua lotzenhiser]

Thank you Bill,

I also noticed on some laptops our “full” background image doesn’t appear but rather half or 3/4 of it is only visible. Can I adjust the size of the image to ensure the entire background image is seen on any device?

Thanks!

[joshua lotzenhiser]

Bill,

Also, is it possible to remove the hero button for mobile device use only?

Thanks!

[Bill Robbins]

How much of the background image is visible depends on how the aspect ratio of the image compares to the aspect ratio of the browser window. The more similar those are the less cropping there will be. It’s a bit of a trade-off that’s required in order for the entire hero area to be covered by an image. Does that make sense?

You can hide the button on mobile devices this way:

@media only screen and (max-width: 520px) {

	body #hero-section a.button {
		display: none;
	}

}

Have a great evening Micah

[joshua lotzenhiser]

Thanks Bill, worked great. Do you have the code for the Hero Title as well?

[Bill Robbins]

Hey Micah,

See how this works for you:

@media only screen and (max-width: 520px) {

body #hero-section .hero-title {
display: none;
}

}

You may want to hide all the content in the hero section instead as the title is needed to place everything there, so if you have a caption, it’ll look funny. This will hide it all:

@media only screen and (max-width: 520px) {

body #hero-section .hero-copy {
display: none;
}

}

Have a great weekend,
Bill

[joshua lotzenhiser]

Awesome! Thanks Bill!

Sorry for so many questions. I do have one more, instead of using a hero title and button can I add a link to the home page picture? I am trying to figure it out but it’s not seeming to work.

Thanks!

[Bill Robbins]

You could do that. For the URL enter this:

#home-widgets

which would link the button to the top of the widget section.

[joshua lotzenhiser]

Is that for the image URL or the button URL?

[Bill Robbins]

Button

[Author]

Posts