How to make feature box responsive

[Peter]

I've used @braddalton 's tutorial to add a feature box to the homepage of my website. It looks good on desktop. However, it doesn't look good on mobile devices.

How can I make it mobile responsive?

Cheers!

http://www.eeuwigslank.com

[Brad Dalton]

It depends on what you add to your feature box so the CSS for Media Queries will vary.

At what screen width are you having problems?

You can modify the default CSS rules using this example:

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

Add your CSS rules here to modify the defaults at 1023px width

}

---

Tutorials for StudioPress Themes.

[Peter]

Thank you @braddalton. I was having problems at 1024, 768 and 480 screen width. Basically everything that isn't desktop.

I've followed your advice and added a css rule in the media queries. This is what I added:

.featured-box {
		max-width: 768px;
	} 

.featured-box {
		max-width: 1023px;
	}

and for the smartphone:

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

.featured-box {
		max-width: 360px;
	}

This works only at the 768 screen width, on the others it's still too big.

I'm probably looking at it too simple. Any more advice would be very helpful.

Cheers

[Author]

Posts