responsive css help with a 1/3 and 2/3 photo pair combo WordPress
In my friends website, I took twenty-sixteen theme as a base and then kept tweaking a child theme to achieve look desired by her (the interior designer), while trying to keep it simple. She's not html literate but prepared to follow specific directions to ensure she can maintain the pages herself.
I thought I had sorted out the 1/3 and 2/3 photo sizes combo. Next to each other on big screens with small separation between and then at some point changing to centered (tablet and small screens) below each other, similar to the 3 * 1/3 wp gallery. The 1/3 size can be left or right of the 2/3 size.
Somehow this has 'broken'. I don't know whether there was a wp 2016 theme update that changed or whether we just missed it in the first place. Also the text below should be free of the float.
I've been a bit ill for a few weeks, so really keen not to mess around here, and would love to have someone work out what needs to be done. (EG: maybe she should float the first 1/3, but not the next 2/3 size photo ?) See example lower down on this page: [[LINK href="http://vanbergendesigns.com.au/724/renovation-and-styling-cammeray/"]]http://vanbergendesigns.com.au/724/renovation-and-styling-cammeray/[[/LINK]]
Alternatively if there is a simple gallery plugin that allows one to have a 2 col gallery 1/3 & 2/3 size, please advise. I had considered a shortcode option to wrap and control the 1/3, 2/3 photo pair, but from a user workflow it is not great, she knows how to "add media" and choose her image sizes etc, so I am trying to have that way of doing it work for her.
So I'd like: revised css and if necessary, the steps she should follow. EG: align/float the first image of the pair left, then ....
MORE INFO:
from the html, to try make request from my flu brain clearer:
we have a two image pair (small 1/3, wider 2/3)
then another two image pair (wider 2/3, small 1/3)
then trying with maybe using a 2 column gallery and always forcing one side to be the 2/3 width?, maybe - will it still center. BUT wp is always going to try serve up images of same sizein a gallery, so I don't think that is a solution.
lastly the 3 column gallery is fine. Don't want to touch it.
<div class="entry-content">
<p><img class="alignleft size-thumbnail wp-image-613" src="http://amr.local/wp/wp-content/uploads/2009/12/FP1-320x320.jpg" alt="FP1" width="320" height="320" /><img class="alignleft wp-image-616 size-two-third" src="http://amr.local/wp/wp-content/uploads/2016/12/home_main-640x320.jpg" alt="home_main" width="640" height="320" /></p>
<p><img class="alignleft wp-image-615 size-two-third" src="http://amr.local/wp/wp-content/uploads/2016/12/FP01-644-x-543-640x320.jpg" alt="FP01 644 x 543" width="640" height="320" /><img class="size-thumbnail wp-image-673 alignright" src="http://amr.local/wp/wp-content/uploads/2009/11/balmain-historical-320x320.jpg" alt="Balmain Historical" width="320" height="320" /></p>
<div id='gallery-1' class='gallery galleryid-263 gallery-columns-2 gallery-size-two-third'><figure class='gallery-item'>
<div class='gallery-icon landscape'>
<a href='http://amr.local/wp/cropped-10-630-x-315-1-jpg/'><img width="320" height="320" src="http://amr.local/wp/wp-content/uploads/2010/11/cropped-10-630-x-315-1-320x320.jpg" class="attachment-two-third size-two-third" alt="cropped-10-630-x-315-1.jpg" /></a>
</div></figure><figure class='gallery-item'>
<div class='gallery-icon landscape'>
<a href='http://amr.local/wp/northwood-multi-level-residence/northwood-multi-level-residence-2/'><img width="640" height="320" src="http://amr.local/wp/wp-content/uploads/2016/05/northwood-multi-level-residence-2-640x320.jpg" class="attachment-two-third size-two-third" alt="Northwood Multi-level Residence 6" /></a>
</div></figure>
</div>
<div id='gallery-2' class='gallery galleryid-263 gallery-columns-3 gallery-size-thumbnail'><figure class='gallery-item'>
<div class='gallery-icon landscape'>
<a href='http://amr.local/wp/northwood-multi-level-residence/fp01-644-x-543/'><img width="320" height="320" src="http://amr.local/wp/wp-content/uploads/2016/12/FP01-644-x-543-320x320.jpg" class="attachment-thumbnail size-thumbnail" alt="Northwood Multi-level Residence 2" /></a>
</div></figure><figure class='gallery-item'>
<div class='gallery-icon landscape'>
<a href='http://amr.local/wp/northwood-multi-level-residence/fp1/'><img width="320" height="320" src="http://amr.local/wp/wp-content/uploads/2009/12/FP1-320x320.jpg" class="attachment-thumbnail size-thumbnail" alt="Northwood Multi-level Residence 3" /></a>
</div></figure><figure class='gallery-item'>
<div class='gallery-icon landscape'>
<a href='http://amr.local/wp/northwood-multi-level-residence/home_main-2/'><img width="320" height="320" src="http://amr.local/wp/wp-content/uploads/2016/12/home_main-320x320.jpg" class="attachment-thumbnail size-thumbnail" alt="Northwood Multi-level Residence 1" /></a>
</div></figure>
</div>
</div><!-- .entry-content -->
Answers (3)
Bob answers:
I think the visual composer plugin is great for her in such situation.
There is free page builder plugin like that.
[[LINK href="https://wordpress.org/plugins/live-composer-page-builder/"]]https://wordpress.org/plugins/live-composer-page-builder/[[/LINK]]
[[LINK href="https://www.youtube.com/channel/UCWwik3CvQpha8sYDuc1hgUA"]]https://www.youtube.com/channel/UCWwik3CvQpha8sYDuc1hgUA[[/LINK]]
[[LINK href="https://wordpress.org/plugins/siteorigin-panels/"]]https://wordpress.org/plugins/siteorigin-panels/[[/LINK]]
Your description is bit confusing for me.
to discuss more can you please ping me at skype. The skyp id is thevaghela
Duncan O'Neill answers:
Try this;
Get rid of the styling rules which have p as parent AND dictate width by commenting them out ( surround lines by /* commented out */ )
p img.size-thumbnail, .gallery-item {
border: 0 none;
color: #ffffff;
display: inline-block;
font-size: large;
height: 320px;
margin: 0.23%;
max-width: 320px;
overflow: hidden;
padding: 0;
vertical-align: top;
width: 300px;/* this is a comment - comment out this line */
and replace it with this code;
.gallery-columns-3 {
width:100%;
}
.gallery-columns-3 .gallery-item {
width:16.66% !important;max-width:16.66%;
}
.gallery-columns-3 .gallery-item:first-child {
width:66.66% !important;max-width:66.66%;
}
That SHOULD make the first element of the gallery 2/3 of the width, and the other two TOTAL 1/3 of the width. Replace that :first-child with :last-child to swap it around.
Add this to make the images stretch across the entire parent container for smaller screen sizes;
@media screen and (max-width:768){
.gallery-columns-3 .gallery-item,
.gallery-columns-3 .gallery-item:first-child {
width:100% !important;max-width:767px;
}
}
Anna-marie Redpath comments:
Hi Duncan,
I don't want to touch the 'gallery-3' - that's perfectly fine as it is.
The question is around when there are a pair (two) photos. Currently NOT in a gallery because gallery forces them to be same size.
Maybe we can use your idea above fpr a 2 column gallery, although I guess it means she can only ever have the second one as the larger width and not the other way around.
Full page is ok (ish) it's on smaller screens that the pair doesn't change to centered above each other.
I have the flu so my brain is just struggling to work methodically through the various media sizes to see what has to chang where.