-
Hello,
I’m trying to get the buttons on the “You Might Also Like,” container to be aligned at the bottom, and the same size (roughly the size of the first buttom). I’d like the images to be aligned at the top, regardless of size, and the title to be in the middle.
Here’s the page:
https://printablesforlife.com/two-week-habit-tracker/
Here’s the current block settings:
<!-- wp:generateblocks/element {"uniqueId":"26d5df7c","tagName":"div","globalClasses":["outline","padding","margins"],"metadata":{"name":"Categories Query Loop","patternName":"core/block/27803"}} --> <div class="outline padding margins"><!-- wp:generateblocks/element {"uniqueId":"74851a52","tagName":"div"} --> <div><!-- wp:generateblocks/text {"uniqueId":"faa04980","tagName":"h2","styles":{"display":"flex","columnGap":"0.5em",".gb-shape svg":{"width":"1em","height":"1em","fill":"currentColor"},"\u0026:is(:hover, :focus)":{"color":"var(\u002d\u002dcontrast)"},"a":{"color":"var(\u002d\u002dcontrast)"}},"css":".gb-text-faa04980{column-gap:0.5em;display:flex}.gb-text-faa04980:is(:hover,:focus){color:var(\u002d\u002dcontrast)}.gb-text-faa04980 .gb-shape svg{width:1em;height:1em;fill:currentColor}.gb-text-faa04980 a{color:var(\u002d\u002dcontrast)}","globalClasses":["outline","padding","h2"]} --> <h2 class="outline padding h2 gb-text-faa04980"><span class="gb-shape"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-list-stars" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5"></path> <path d="M2.242 2.194a.27.27 0 0 1 .516 0l.162.53c.035.115.14.194.258.194h.551c.259 0 .37.333.164.493l-.468.363a.28.28 0 0 0-.094.3l.173.569c.078.256-.213.462-.423.3l-.417-.324a.27.27 0 0 0-.328 0l-.417.323c-.21.163-.5-.043-.423-.299l.173-.57a.28.28 0 0 0-.094-.299l-.468-.363c-.206-.16-.095-.493.164-.493h.55a.27.27 0 0 0 .259-.194zm0 4a.27.27 0 0 1 .516 0l.162.53c.035.115.14.194.258.194h.551c.259 0 .37.333.164.493l-.468.363a.28.28 0 0 0-.094.3l.173.569c.078.255-.213.462-.423.3l-.417-.324a.27.27 0 0 0-.328 0l-.417.323c-.21.163-.5-.043-.423-.299l.173-.57a.28.28 0 0 0-.094-.299l-.468-.363c-.206-.16-.095-.493.164-.493h.55a.27.27 0 0 0 .259-.194zm0 4a.27.27 0 0 1 .516 0l.162.53c.035.115.14.194.258.194h.551c.259 0 .37.333.164.493l-.468.363a.28.28 0 0 0-.094.3l.173.569c.078.255-.213.462-.423.3l-.417-.324a.27.27 0 0 0-.328 0l-.417.323c-.21.163-.5-.043-.423-.299l.173-.57a.28.28 0 0 0-.094-.299l-.468-.363c-.206-.16-.095-.493.164-.493h.55a.27.27 0 0 0 .259-.194z"></path> </svg></span><span class="gb-text">You Might Also Like</span></h2> <!-- /wp:generateblocks/text --></div> <!-- /wp:generateblocks/element --> <!-- wp:generateblocks/text {"uniqueId":"475a2e6a","tagName":"p","styles":{"textAlign":"center","color":"var(\u002d\u002dcontrast-2)","a":{"color":"var(\u002d\u002dcontrast-2)","@media (max-width:767px)":{"color":"var(\u002d\u002dcontrast)"}},"@media (max-width:767px)":{"color":"var(\u002d\u002dcontrast)"}},"css":".gb-text-475a2e6a{color:var(\u002d\u002dcontrast-2);text-align:center}.gb-text-475a2e6a a{color:var(\u002d\u002dcontrast-2)}@media (max-width:767px){.gb-text-475a2e6a{color:var(\u002d\u002dcontrast)}.gb-text-475a2e6a a{color:var(\u002d\u002dcontrast)}}","globalClasses":["gbp-section__tagline"]} --> <p class="gb-text gbp-section__tagline gb-text-475a2e6a">{{term_list link:term|tax:category|sep: • }}</p> <!-- /wp:generateblocks/text --> <!-- wp:generateblocks/query {"uniqueId":"5745f5cc","tagName":"div","query":{"post_type":["post"],"posts_per_page":"3","tax_query":[{"taxonomy":"category","terms":["current"],"rest":"categories","operator":"IN","includeChildren":true}]}} --> <div><!-- wp:generateblocks/looper {"uniqueId":"4ab8a117","tagName":"div","styles":{"display":"grid","gridTemplateColumns":"repeat(3, minmax(0, 1fr))","columnGap":"16px","rowGap":"16px","@media (max-width:767px)":{"display":"grid","gridTemplateColumns":"1fr"}},"css":".gb-looper-4ab8a117{column-gap:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:16px}@media (max-width:767px){.gb-looper-4ab8a117{display:grid;grid-template-columns:1fr}}"} --> <div class="gb-looper-4ab8a117"><!-- wp:generateblocks/loop-item {"uniqueId":"25ee1be0","tagName":"div","styles":{"display":"flex","flexDirection":"row","columnGap":"16px","rowGap":"16px"},"css":".gb-loop-item-25ee1be0{column-gap:16px;display:flex;flex-direction:row;row-gap:16px}"} --> <div class="gb-loop-item gb-loop-item-25ee1be0"><!-- wp:generateblocks/element {"uniqueId":"baf5dcf3","tagName":"div","styles":{"backgroundColor":"var(\u002d\u002dbase-3)","paddingTop":"16px","paddingLeft":"16px","paddingRight":"16px","paddingBottom":"16px","marginBottom":"16px","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"space-between","@media (max-width:767px)":{"width":"100%"},"height":"100%"},"css":".gb-element-baf5dcf3{align-items:center;background-color:var(\u002d\u002dbase-3);display:flex;flex-direction:column;height:100%;justify-content:space-between;margin-bottom:16px;padding:16px}@media (max-width:767px){.gb-element-baf5dcf3{width:100%}}","globalClasses":["outline","padding"],"metadata":{"name":"Post Card","patternName":"core/block/27797"}} --> <div class="outline padding gb-element-baf5dcf3"><!-- wp:generateblocks/media {"uniqueId":"b38efc2b","tagName":"img","styles":{"height":"auto","maxWidth":"100%","objectFit":"cover","width":"auto"},"css":".gb-media-b38efc2b{height:auto;max-width:100%;object-fit:cover;width:auto}","globalClasses":["outline"],"htmlAttributes":{"alt":"","title":"multiplication-chart-12x12-featured","src":"{{featured_image key:url}}"}} --> <img class="outline gb-media-b38efc2b" alt="" title="multiplication-chart-12x12-featured" src="{{featured_image key:url}}"/> <!-- /wp:generateblocks/media --> <!-- wp:generateblocks/text {"uniqueId":"b61f699c","tagName":"h2","styles":{"fontSize":"1.5rem","textAlign":"center","\u0026:is(:hover, :focus)":{"color":"var(\u002d\u002dbase-2)"},"a":{"color":"var(\u002d\u002dcontrast)"},"color":"var(\u002d\u002dcontrast)","marginBottom":"auto","marginTop":"16px","@media (max-width:767px)":{"fontSize":"1em"}},"css":".gb-text-b61f699c{color:var(\u002d\u002dcontrast);font-size:1.5rem;margin-bottom:auto;margin-top:16px;text-align:center}.gb-text-b61f699c:is(:hover,:focus){color:var(\u002d\u002dbase-2)}.gb-text-b61f699c a{color:var(\u002d\u002dcontrast)}@media (max-width:767px){.gb-text-b61f699c{font-size:1em}}","globalClasses":["h2"]} --> <h2 class="gb-text h2 gb-text-b61f699c">{{post_title link:post}}</h2> <!-- /wp:generateblocks/text --> <!-- wp:generateblocks/element {"uniqueId":"3bd44378","tagName":"div","styles":{"width":"100%","alignItems":"center","display":"flex","justifyContent":"center","a":{"color":"var(\u002d\u002dcontrast)","backgroundColor":"var(\u002d\u002dbase-3)"},"a:hover":{"color":"var(\u002d\u002dbase-3)","backgroundColor":"var(\u002d\u002dcontrast)"}},"css":".gb-element-3bd44378{align-items:center;display:flex;justify-content:center;width:100%}.gb-element-3bd44378 a{color:var(\u002d\u002dcontrast);background-color:var(\u002d\u002dbase-3)}.gb-element-3bd44378 a:hover{color:var(\u002d\u002dbase-3);background-color:var(\u002d\u002dcontrast)}","globalClasses":["button-margins"],"metadata":{"name":"View Button","categories":[],"patternName":"core/block/27821"}} --> <div class="button-margins gb-element-3bd44378"><!-- wp:generateblocks/text {"uniqueId":"ec188b10","tagName":"a","styles":{"display":"inline-flex","alignItems":"center","columnGap":"0.5em",".gb-shape svg":{"width":"1em","height":"1em","fill":"currentColor"},"width":"100%","textAlign":"center","justifyContent":"center","color":"var(\u002d\u002dcontrast)","fontSize":"1.25em","fontWeight":"bold","backgroundColor":"var(\u002d\u002dbase-3)","\u0026:is(:hover, :focus)":{"backgroundColor":"var(\u002d\u002dcontrast)"}},"css":".gb-text-ec188b10{align-items:center;background-color:var(\u002d\u002dbase-3);color:var(\u002d\u002dcontrast);column-gap:0.5em;display:inline-flex;font-size:1.25em;font-weight:bold;justify-content:center;text-align:center;width:100%}.gb-text-ec188b10:is(:hover,:focus){background-color:var(\u002d\u002dcontrast)}.gb-text-ec188b10 .gb-shape svg{width:1em;height:1em;fill:currentColor}","globalClasses":["outline","button-padding"],"htmlAttributes":{"href":"{{post_permalink}}"}} --> <a class="outline button-padding gb-text-ec188b10" href="{{post_permalink}}"><span class="gb-shape"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-right-square-fill" viewBox="0 0 16 16"> <path d="M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1"></path> </svg></span><span class="gb-text">View</span></a> <!-- /wp:generateblocks/text --></div> <!-- /wp:generateblocks/element --></div> <!-- /wp:generateblocks/element --></div> <!-- /wp:generateblocks/loop-item --></div> <!-- /wp:generateblocks/looper --></div> <!-- /wp:generateblocks/query --></div> <!-- /wp:generateblocks/element --> -
Hi there,
The page is returning a 404 error. Can you check?
https://app.screencast.com/KIdgUuLMuTjBn -
I can’t seem to replicate the issue. On my end, it’s working.
-
I can see the page now.
The parent containers of the buttons are sharing the same class
gb-element-3bd44378, it seems to be copied and pasted multiple times on the same page.So the styles of it from different blocks can override each other on the same page. Currently, it has a
heightset to100%. Can you find the block and remove it?If not, try duplicating each of the block to generate a new container with new class, and remove the original one.
Let me know if this helps!
-
This is a reusable block… So I’m not sure how it got the same attributes as another block on the page… But regardless, I am trying to fix it by adding a new block with a new class. When I try to save it, I’m getting the error “The response is not a valid JSON.” So it won’t let me save the changes.
The pattern is called “Categories Query Loop.” Maybe you can take a look?
-
The buttons seem to be behaving now as expected, despite getting that error. Not sure if it’s coincidence or what!
-
Do you mean the buttons in the You might also like section?
If so, they seems normal except the link color.Go to cusotmizer > colors > content, and remove the link color set there.
If you want to set a global link color, go set it at cusotmizer > colors > body >link.
Viewing 7 posts - 1 through 7 (of 7 total)
- You must be logged in to reply to this topic.