Responsive?

  • Resolved Ownsale

    (@unconsultancy)


    6 years ago

    Hi,

    Exactly what I’ve been looking for.

    Please see footer area at bottom of homepage. So I’ve got a footer area sidebar into which I’ve placed 3 widgets all at 1/3.

    Works beautifully apart from when I reduce screen width it isn’t responsive and so content crams up against each other.

    Is this just a feature or do I need to do something?

    Thanks

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Alexis J. Villegas

    (@ajvillegas)

    Hello @unconsultancy,

    I’m glad you found the plugin useful!

    The plugin doesn’t include responsive styles for columns as a feature since I didn’t want to make any design decisions better handled by the theme. Under ‘Settings’ > ‘Widget Columns’ you can choose to not load the column classes CSS and copy the provided styles into your theme’s stylesheet (usually style.css) to customize the column widths and behavior.

    With that said, I looked at your theme, and here is how you can make the columns responsive and behave similarly to how columns behave on your theme right now:

    1. Go to ‘Settings’ > ‘Widget Columns’ and select the second option “Do NOT load the CSS in the <head>”. Click the “Save changes” button.

    2. Go to your footer area sidebar and make sure to add a “– Widget Row –” widget above your three widgets. This will wrap the widgets in a .widget-row div and assign the .first class to te first widget. This is important for styling and to make sure your widgets align with other elements in your theme (it is also necessary if you want to stack multiple widget rows in the sidebar area).

    3. Now go to your theme’s stylesheet (style.css) and add the following modified column classes CSS to the end of the file:

    
/*
 * Column Classes
 *
 * Link: https://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css
 */

.one-half,
.one-third,
.two-thirds,
.one-fourth,
.three-fourths,
.one-sixth,
.five-sixths {
    float: left;
    margin-left: 2.5641025641026%;
}

.one-half {
    width: 48.717948717949%;
}

.one-third {
    width: 31.623931623932%;
}

.two-thirds {
    width: 65.811965811966%;
}

.one-fourth {
    width: 23.076923076923%;
}

.three-fourths {
    width: 74.358974358974%;
}

.one-sixth {
    width: 14.529914529915%;
}

.five-sixths {
    width: 82.905982905983%;
}

.first {
    clear: both;
    margin-left: 0;
}

/* Style .widget-row .wrap the same as .section-wrap in theme */
.widget-row .wrap {
    margin: 0 auto;
    max-width: 1100px;
    padding: 0 50px;
}

/* Override the .widget--footer styles when inside a .widget-row */
.widget-row .widget--footer {
    max-width: inherit;
    padding: 0;
    margin-left: 2.5641025641026%;
    margin-right: 0;
}

.widget-row .first.widget--footer {
    margin-left: 0;
}

/* Media Queries */

@media only screen and (max-width: 900px) {
    .one-half,
    .one-third,
    .two-thirds,
    .one-fourth,
    .three-fourths,
    .one-sixth,
    .five-sixths {
        float: none;
        margin-left: 0;
        width: 100%;
    }
	
    .widget-row .widget--footer {
        margin-left: 0;
    }
}

    Please note that I added styles specific to your theme that will override the default footer widgets behavior only when defining a widget row using the “– Widget Row –” widget at the start of a row. You can adjust row padding and margin under “Advanced settings” in the “– Widget Row –” widget.

    Please let me know if this works for you. Good luck!

    Thread Starter Ownsale

    (@unconsultancy)

    Outstanding. Now that’s what I call support. Many thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Responsive?’ is closed to new replies.