Column Shortcodes and Responsive Design

Community Forums Forums Design Tips and Tricks Column Shortcodes and Responsive Design

This topic is: not resolved

This topic contains 4 replies, has 2 voices, and was last updated by  SharonMarks 6 months, 3 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #64334

    SharonMarks
    Participant
    Post count: 2

    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!

    #64383

    Jeremy
    Participant
    Post count: 55

    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

    #64399

    SharonMarks
    Participant
    Post count: 2

    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

    #64759

    Jeremy
    Participant
    Post count: 55

    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

    #64780

    SharonMarks
    Participant
    Post count: 2

    That worked perfectly Jeremy. Thank you for your time.

    Sharon

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.