Align Pages Side-by-Side

  • Resolved plentyvegan

    (@plentyvegan)


    8 years, 2 months ago

    This may be a child theme specific question, but is there a way to have two featured pages side-by-side instead of stacked? So, basically two columns?

    I’m using the Divine child theme and there is a section Home – Double Content but this still stacks the featured pages but left justifies them into half the width – confusing.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Nick Diego

    (@ndiego)

    Hi plentyvegan. This is likely just a CSS styling issue. Can you provide me with a link to the issue where I can take a peak live? I should then be able to provide you with the style tweaks needed to make this layout happen!

    Nick

    Thread Starter plentyvegan

    (@plentyvegan)

    Hi Nick,

    I appreciate the style help. I have a ticket in with the theme creator too but they’re a bit slow to respond and not very detailed.

    I have it on my staging site: https://plentyvegan.staging.wpengine.com/

    You’ll see the pages “glossary” and “references” are the ones I’m referring to.

    Thanks.

    Diana

    Plugin Author Nick Diego

    (@ndiego)

    Hi Diana,

    Ahh I see. That widget area is designed for the Featured Posts Widget, not Featured Page widgets. That is why the styling is not displaying the two widgets next to each other.

    The CSS below should get you started, but you will likely want to add some more for the desired effect. I also added some styling for the Mailchimp widget you added, otherwise things will get screwy.

    Hope this clarifies the issue and helps!

    
.home-double-bottom .featured-content.featuredpage:first-child {
	width: 50%;
	float: left;
}
.home-double-bottom .featured-content.featuredpage {
	width: 50%;
	float: right;
}
.home-double-bottom .featured-content.featuredpage .entry {
	width: 100%;
}
widget_mailchimpsf_widget {
	clear: both
}

    Nick

    Thread Starter plentyvegan

    (@plentyvegan)

    This is great, Nick. I’ve made the change and it looks good.

    On mobile, I can’t figure out which style to specify to keep the image at 100% width within the content area (so 50% of the screen): https://plentyvegan.staging.wpengine.com/

    Thanks again for all your assistance.

    Diana

    Plugin Author Nick Diego

    (@ndiego)

    Hi Diana,

    If you inspect the page, you can see that the images are being restricted to 45% once the page is below 767px wide. On line 2890 of your stylesheet you will see the following:

    
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.home-bottom .featured-content .entry {
	width: 45% !important;
	min-height: 0px;
}

    That !important is overriding the styling I provided you. Remove that and you should be good.

    Nick

    Thread Starter plentyvegan

    (@plentyvegan)

    Ah. That formatting affects the store so rather than remove it, I realized I could edit it to the following to have it only apply to products:

    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
    width: 45% !important;
    min-height: 0px;
    }

    Thanks again!

    Diana

    Plugin Author Nick Diego

    (@ndiego)

    Glad it is working for you!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Align Pages Side-by-Side’ is closed to new replies.