Help making columns responsive

Hi Natalie,

I’m glad you found the plugin useful. By default the columns are not responsive since every use case is different and I didn’t want to make any assumptions. You could edit the CSS for each row as necessary by adding custom row classes.

I looked at your page and here is how you can make the widget row responsive for your specific case:

1. Add a custom class to the widget row. In this example I’m adding widget--home-row, to the Widget Row widget under Advanced options > CSS classes text field.

2. Remove the current 200px right and left row padding by setting both values back to zero under Advanced options > Row padding.

3. Remove the current widgets. I see that you are using a total of 9 widgets, one for each column section, but that is not necessary and would in fact make it impossible to stack up on smaller screens. Instead add 3 Custom HTML widgets and add the following code to each. I cleaned up your HTML and made some structural changes to make your code valid and more accessible (see bottom notes).??

First widget:

<div class="demobox">
    <h3 class="widget-heading">Candidates</h3>
</div>

<div class="text-wrap">
    <p>Looking for your next role?</p>
    <p>Need some help with interview preparation?</p>
    <p>Or a confidential chat about the market
        <br>and career options?</p>
    <p>Please send your CV or enquiries to:
        <br><a href="mailto:[email protected]">[email protected]</a></p>
</div>

<div class="center-text">
    <a class="button" href="/candidates">Find out more</a>
</div>

Second widget:

<div class="demobox">
    <h3 class="widget-heading">Employers</h3>
</div>

<div class="text-wrap">
    <p>Looking to register a job?</p>
    <p>Or want some market insight
        <br>or salary bench-marking?</p>
    <p>Contact us at:
        <br><a href="mailto:[email protected]">[email protected]</a></p>
</div>

<div class="center-text">
    <a class="button" href="/employers">Find out more</a>
</div>

Third widget:

<div class="demobox">
    <h3 class="widget-heading">Our Values</h3>
</div>

<div class="text-wrap">
    <p>At Marble Mayne we pride ourselves
        <br>on our core values:</p>
    <p><strong>Flexibility</strong></p>
    <p><strong>Quality</strong></p>
    <p><strong>Honesty</strong></p>
</div>

<div class="center-text">
    <a class="button" href="/values">Find out more</a>
</div>

Make sure to add the extendedwopts-md-center class to each widget like you did before to retain the current center style. Also assign a Column width value o f 1/3 to each.

4. Save each widget content.

5. Navigate to Appearance > Customize > Additional CSS and add the following CSS styles. You could replace the current #demobox since I changed it to a class (see bottom notes).

/* Convert #demobox into a class. */
.demobox {
    background-color: #6ea4ca;
    padding: 5px;
    border: 1px #6ea4ca;
    border-radius: 5px;
}

/* Add padding for text content wrapper. */
.text-wrap {
    padding: 50px 0 30px;
}

/* Assign h1 styles to widget heading. */
.widget-heading {
    font-size: 34px;
    margin: 33px 0;
}

/* Replicate the <center> tag style. Use on a <div> tag. */
.center-text {
    text-align: center;
}

/* Prevent column class margin from being overwritten by adding specificity. */
.widget--home-row .one-third {
    margin-left: 2.5641025641026%;
}

/* Prevent first column margin from being overwritten by adding specificity. */
.widget--home-row .first {
    margin-left: 0;
}

/* Center the custom widget row content. */
.widget--home-row > .wrap {
    margin: 0 auto;
}

@media only screen and (max-width: 767px) {
    /* Center columns on smaller screens. */
    .widget--home-row .one-third {
        width: 100%;
        margin-left: 0;
        margin-bottom: 40px;
        float: none;
    }
}

@media only screen and (min-width: 768px) {
    /* Add height for text content wrapper. */
    .text-wrap {
        min-height: 400px;
    }

    /* Adjust heading size as screen resizes */
    .widget-heading {
        font-size: 30px;
    }

    /* Match theme's max width value for custom widget row content. */
    .widget--home-row > .wrap {
        max-width: 750px;
    }
}

@media only screen and (min-width: 992px) {
    /* Add height for text content wrapper. */
    .text-wrap {
        min-height: 370px;
    }

    /* Adjust heading size as screen resizes */
    .widget-heading {
        font-size: 34px;
    }

    /* Match theme's max width value for custom widget row content. */
    .widget--home-row > .wrap {
        max-width: 970px;
    }
}

Notes:

1. In your Additional CSS content in the Customizer, you want to change #demobox to .demobox since you are using it multiple times in your HTML, and an ID should only be used once, whereas a class is meant to be used multiple times, otherwise your HTML is not valid (even thought it works).

2. Don’t use more than one h1 tag on a page. You have too many right now and that could hurt your SEO. Use an h2 or h3 and create a custom class such as .widget-heading then assign the same styles you have for your h1. This way your HTML will be semantic and more accessible. This will also help your SEO and search engine indexing. For example:

h3.widget-heading {
    font-size: 34px;
    margin: 33px 0;
}

3. Avoid using the <center> tag since it is desecrated in HTML5, and although it might work in some browsers, it could be dropped at any time. Use text-align: center in your CSS instead. You could wrap the button link on a <div> with a .center-text class to get the same effect. For example:

div.center-text {
    text-align: center;
}

4. You shouldn’t use the target="_blank" attribute for opening links on new pages as you had on the button links, since they not only point to the same website, but they can also have a negative effect on accessibility. It does not provide a good user experience for screen reader users, and generally the attribute should always be avoided.

I hope this helps you. Let me know if it worked, and good luck with the website!

• This reply was modified 4 years, 7 months ago by Alexis J. Villegas.
• This reply was modified 4 years, 7 months ago by Alexis J. Villegas.

Thanks so much for your help. As you can probably tell, I’m a WordPress novice so this advice is invaluable.

Only have one issue – when I try to add the CSS styles, I get a message saying “Markup is not allowed in CSS.” Any idea how I could fix this?

Thanks
Natalie

Hi Natalie,

No problem, glad I could help!

The message you are getting is caused by the comments in the CSS explaining what I did –?those lines that begin with /* and end with */. Remove them after pasting the CSS in the Additional CSS setting.

Let me know if that works.

Cheers.

That worked beautifully. Thanks so much for your help!

You’re welcome Natalie. Good luck with the website.