Custom widgets in mobile view (Magazine)

[propaganda]

I have 3 custom widgets in a wrapper at the top of my page which are padded to space them out so they are not bunched together

.home-top-left {
	width: 370px;
	float: left;
	padding-right: 10px;
   	position: relative;
}

.home-top-middle {
	width: 370px;
	float: left;
	padding-left: 5px;
	padding-right: 5px;
    	position: relative;
}

.home-top-right {
	width: 370px;
	float: right;
	padding-left: 10px;
    	position: relative;
}

It looks fine on regular display, on mobile through the padding is pushing them outside of the screen forcing a horizontal scroll. I tried using a percentage width rather than a pixel width but then on mobile they don't stack and really scrunch up making them difficult to read and navigate. Any suggestions would be appreciated, thanks.

[Tom]

Please provide a link to your site so we can see what you see.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[propaganda]

Domain is http://www.offgridtrailers.ca

Ignore the content it's under development

[Tom]

How about :

.home-top-left,
.home-top-middle,
.home-top-right {
	float: left;
	padding: 1.75%;
	width: 33%;
}

@media only screen and (max-width: 768px) {
	
	.home-top-left,
	.home-top-middle,
	.home-top-right,
	.home-top-left img,
	.home-top-middle img,
	.home-top-right img {
		width: 100%;	

	}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[propaganda]

Works like a charm thanks Tom, I am new to the ins and outs of mobile css but am beginning to understand it now.

[Author]

Posts