Column Shortcodes and Responsive Design

[SharonMarks]

I am using the Minimum theme and have the four columns on a page using the short codes but when looked at on a phone they are too small and too close together. How would I go about having them appear one after another when looked at on smaller media? Let me know if my question doesn't make sense.

I am doing this locally and have no URL to show yet.

Thanks!

[Jeremy]

Your question is hard to follow.
Which short codes are you referring to? What four columns are you referring to?
Much easier to hep if you can attach a URL or image

---

If you want to say thanks Follow me on Twitter | My Website

[SharonMarks]

Thanks for your reply. I am sorry. I meant I am using the front page widgets on Minimum to populate the content on that page. When I open it on an iPhone for example they are pretty narrow and unreadable. I am trying to figure out how to make them appear one after the other vertically for mobile.
Thanks again.

Sharon

[Jeremy]

It's hard to say without seeing your site live.... but try adding this code at the bottom of your style.css in the responsive section that says (max-width: 320px)

.home-featured-1,
.home-featured-2,
.home-featured-3,
.home-featured-4 {
width: 100%;
}

E.g. it should look like this...

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

.header-image .site-header .title-area .site-title a {
background-size: contain !important;
}
.home-featured-1,
.home-featured-2,
.home-featured-3,
.home-featured-4 {
width: 100%;
}

}

---

If you want to say thanks Follow me on Twitter | My Website

[SharonMarks]

That worked perfectly Jeremy. Thank you for your time.

Sharon

[Author]

Posts