[Support request] How to get the elements on may layout vertically aligned?

[Nicolas]

Hello,

How to get the “caption paragraph” of the the 2 images being vertically aligned?
Same question for the buttons?

PS: By the way, can you confirm the URL I shared in the Private information field will not appear on Google? I’m damaging my SEO with all the links I shared on the WordPress and GP support forums. How to prevent this?

Thx

[David]

Hi there,

the simplest fix would be to select those images and set their Height value to the same. Or better still, where possible, use Images that have the same aspect ratio.

Any information you share in the Private Information field including URLS, are only displayed to a logged in GP Admin user, so search engines and there bots CANNOT see that.

[Nicolas]

Hi there,

This is much harder than that.
I have zero control on the image (or at least, I do not know how if there is away). They are actually coming from a ready-to-use HTML code provide by amazon.

I do insert this code in a Custom HTML block.
Here is an screenshot showing this.

In the Priv Info field, I copied and paste th actual code for those image.

[Fernando]

Hi Nicolas,

You can try adding cu-grid-align to the class list of the Grid Block.

Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

Then, add this CSS through Appearance > Customize > Additional CSS:

.gb-grid-wrapper.cu-grid-align > .gb-grid-column > .gb-container > .gb-inside-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gb-grid-wrapper.cu-grid-align > .gb-grid-column > .gb-container > .gb-inside-container > p:last-of-type {
   margin-top: auto;
}

[Nicolas]

Hi,

I implemented this and I cannot see a difference.
Please see here and the URL in the Priv Info field.

[Fernando]

There’s a syntax error somewhere in your CSS codes.

You can copy all your custom CSS codes here to check: http://csslint.net/

Please fix those first and re-add the CSS code I provided.

[Nicolas]

Ok, but my CSS only contains your code snippet.

Here is the result of the test.

But I just realized I also have code snippets in Additional CSS.

It is reported as being full of warnings/errors.
I’m not sure how to fix this and I remembered you shared some of that code with me a few months ago:

/* GeneratePress Site CSS */ /* Colors */
.main-navigation ul li:after {
background-color: #000;
}

.main-navigation .inside-navigation {
border-top: 0.5px solid #d4d7d8;
}

.wpsp-card, .wpsp-card a, .wpsp-card .wp-show-posts-meta a, .wpsp-card .wp-show-posts-meta a:visited {
color: #fff;
}
.navigation-search.nav-search-active {
background-color: rgba(255,255,255,0.95);
top: 100%;
}

/* Theme Global */

@media (min-width: 769px) {
body {
margin: 0 30px;
}
}

body.single-post.no-sidebar .site-content {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}

/* Navigation */
.second-nav.grid-container {
padding: 0;
}

@media (min-width: 769px) {
.main-navigation ul li {
position: relative;
}

.main-navigation ul li:after {
content: ”;
position: absolute;
height: 0;
width: 100%;
bottom: 0;
left: 0;
pointer-events: none;
filter: hue-rotation(90deg);
-webkit-filter: hue-rotation(90deg);
-webkit-transition: height 0.35s ease;
transition: height 0.35s ease;
}

.main-navigation ul li:hover:after, .main-navigation ul li.current-menu-item:after {
height: 6px;
}
}

/* Widgets */
.widget-title {
margin: 1em 0;
font-size: 0.8em !Important;
}

.widget .wp-show-posts article {
margin-bottom: 0.5em !important;
}

.zero-padding {
padding: 0 !important;
}

.widget.no-background {
background-color: transparent;
}

/* Buttons */
button, html input[type=”button”], input[type=”reset”], input[type=”submit”], a.button, a.button:visited, a.wp-block-button__link:not(.has-background) {
pointer-events: initial !important;
border-color: inherit;
border: 1px solid;
}

/* Blog */
.generate-columns .inside-article {
padding: 0 0 15px;
}

@media (max-width: 768px) {
.generate-columns .inside-article>*:not(.post-image) {
padding: 0 15px;
}
}

.generate-columns-container article .inside-article .post-image {
margin-bottom: 0.5em;
}

.generate-columns-container article .inside-article .entry-summary {
margin-top: 0.5em;
font-size: 0.8em;
}

.generate-columns-container article .entry-header, .wp-show-posts-entry-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}

@media (min-width: 768px) {
.generate-columns-container article .entry-header .entry-title, .wp-show-posts article .wp-show-posts-entry-title {
line-height: 2.5ex;
height: 5ex;
overflow: hidden;
text-overflow: ellipsis;
}
}

.wp-show-posts .wp-show-posts-inner {
overflow: hidden;
}

@media (min-width: 420px) {
.wpsp-align .wp-show-posts-image {
margin-bottom: 0;
}
}
.wpsp-align .wp-show-posts-image a, .wpsp-align .wp-show-posts-image img {
height: 100%;
}

.generate-columns-container article .inside-article img, .wp-show-posts-image img {
-o-object-fit: cover !important;
object-fit: cover !important;
}

/* WPSP Grids */
/* Single column align side image */
/* Add wpsp-align class to to WPSP List shortcode wrapper */

@media (min-width: 420px) {
.wpsp-align .wp-show-posts-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

.wpsp-align .wp-show-posts-inner>div {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}

@media (max-width: 768px) and (min-width: 420px) {
.wpsp-align .wp-show-posts-inner .wp-show-posts-image {
margin-right: 1.5em;
}
}

/* magazine Grid Golden Ratio 5 block standard */
/* Add wpsp-grid class to WPSP List shortcode wrapper */

@media (min-width: 600px) {
.wpsp-grid .wp-show-posts {
display: grid;
}
}

@media (min-width: 900px) {
.wpsp-grid .wp-show-posts {
grid-template-columns: repeat(8, 1fr);
grid-template-rows: 1fr auto;
}

.wpsp-grid .wp-show-posts article:first-child {
grid-column: 1 / 5;
grid-row: 1 / 4;
}

.wpsp-grid .wp-show-posts article:nth-child(2) {
grid-column: 5 / end;
grid-row: 1 / 2;
}

.wpsp-grid .wp-show-posts article:nth-child(3) {
grid-column: 5 / 7;
grid-row: 2 / 4;
}

.wpsp-grid .wp-show-posts article:nth-child(4) {
grid-column: 7 / end;
grid-row: 2 / 4;
}
}

@media (max-width: 899px) and (min-width: 600px) {
.wpsp-grid .wp-show-posts article {
grid-column: span 4;
}

.wpsp-grid .wp-show-posts article:nth-child(3), .wpsp-grid .wp-show-posts article:nth-child(4) {
grid-row: 3;
grid-column: span 2;
}
}

.wpsp-grid article:not(:first-child) .wp-show-posts-image a img {
height: 250px;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}

.wpsp-grid article:first-child .wp-show-posts-image a img {
height: 500px;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}

.wpsp-grid article:not(:first-child) .wp-show-posts-entry-summary, .wpsp-grid article:not(:first-child) .wp-show-posts-entry-meta-below-post, .wpsp-grid article:not(:first-child) .wpsp-read-more {
display: none;
}

/* WPSP Card Styling */
/* Add wpsp-card class to WPSP List shortcode wrapper */
.wpsp-card .wp-show-posts-meta a, .wpsp-card .wp-show-posts-meta a:visited {
font-size: 1em;
font-weight: 500;
text-transform: uppercase;
}

:not(.widget).wpsp-card .wp-show-posts article, .wpsp-card .wp-show-posts-image {
margin-bottom: 0 !important;
}

.wpsp-card .wp-show-posts-inner {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.wpsp-card .wpsp-content-wrap {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 5% 8%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.35);
background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0)));
background: linear-gradient(0deg, rgba(80, 50, 50, 0.5) 30%, rgba(0, 0, 0, 0) 100%);
pointer-events: none;
}

.wpsp-card article {
position: relative;
overflow: hidden;
}

.wpsp-card article, .wpsp-card article .wp-show-posts-image img {
-webkit-backface-visibility: hidden;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}

.wpsp-card article:hover .wp-show-posts-image img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}

.header-widget .lsi-social-icons li {
margin-bottom: 0 !important;
}

body .happyforms-flex {
padding: 0;
} /* End GeneratePress Site CSS */

.wpsp-grid .wp-show-posts {
background-color: #000;
}
.wpsp-grid article .wp-show-posts-image a img {
opacity: 0.7;
}

.archive .description {
order: 2;
padding-left:30px;
}
.archive .gb-headline {
margin-bottom:0;
}
.archive .gb-container .gb-inside-container {
padding: 30px 0 0 0;
}
.post .post-image img, #wpsp-1275 .post img {
height: 200px;
object-fit: cover;
object-position: 100% 10%;
}
.wpsp-grid article:first-child .wp-show-posts-image span img {
height: 500px;
width: 100%;
}
.wpsp-grid article:not(:first-child) .wp-show-posts-image span img {
height: 250px;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
#wpsp-1279 .wp-show-posts-single img {
height: 275px !important;
object-fit: cover;
object-position: 100% 10%;
}
span.button, span.button:visited {
pointer-events: initial !important;
border-color: inherit;
border: 1px solid;
background-color: var(–accent);
}
span.button:hover {
color: var(–accent);
background-color: #ffffff;
}
.archive .entry-summary span {
color: var(–accent);
}

@media (max-width: 575px) {
.breadcrumbs {
display:none;
}
.archive .description, .archive .gb-headline {
padding:0 15px;
}
}

/*How to fix the height of a container?*/
.gb-grid-wrapper.gb-grid-wrapper-bfa59e49 > .gb-grid-column > .gb-container > .gb-inside-container {
display: flex;
flex-direction: column;
height: 100%;
}

.gb-grid-wrapper.gb-grid-wrapper-bfa59e49 > .gb-grid-column > .gb-container > .gb-inside-container > img:last-of-type {
width: 100%;
}

.gb-grid-wrapper.gb-grid-wrapper-bfa59e49 > .gb-grid-column > .gb-container > .gb-inside-container > .gb-button-wrapper {
margin-top: auto;
}

[Fernando]

I tested your CSS codes and this is what I get: https://share.getcloudapp.com/RBuBlXxg

This is all your code, not just the code I provided.

You might have accidentally removed a } or something. Please check the error in the screenshot.

[Nicolas]

I’m sorry but this is Chinese to me because I’m confused by both English and not being a coder.
I tried adding a } on line 42 and it only creates new, additional errors.

[Fernando]

I see. Can you try re-adding this at the very bottom of all your code to test?:

.gb-grid-wrapper.cu-grid-align > .gb-grid-column > .gb-container > .gb-inside-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gb-grid-wrapper.cu-grid-align > .gb-grid-column > .gb-container > .gb-inside-container > p:last-of-type {
   margin-top: auto;
}

[Nicolas]

Hello,

I added the code at the very bottom of Customize > Additional CSS.

Here is two images that seems not to have been fixed.

I have a feeling we have been adding code over code and I’m completely lost on my side since I’m not a coder myself.
I know you’re doing a great job helping people here in this amazing support forum. Just sharing my thoughts (sorry about that).

So I shared 2 URL in the P.I. field so that you can compare all the images on those 2 pages and maybe understand if there is some inconsistencies, something going wrong there.

Thank you again for your great support.

[Fernando]

You haven’t added cu-grid-align to the class list of the Grid Block of that Grid. You need to add that class for it to work.

Alternatively, if you can wait a little bit, we’re releasing an Alpha version of GenerateBlocks 1.7.0 in January, hopefully, by the first week.

This version should allow you to create that layout with no code or minimal code needed theoretically.

[Nicolas]

Well, yes, I did and I double-checked it. But no change.

Wow, that is great news regarding GB.
I might then need a bit of your help to clean my CSS then and remove all the “patches”‘ we tried together.

[Fernando]

That’s odd. The class still isn’t there from my end. See: https://share.getcloudapp.com/BluRxAJk

I think your screenshot is a different Grid Block. It has a different caption.

Kindly add it to the one which isn’t aligned.

[Nicolas]

Hello,

Kindly see the URL shared in the PI field.
The image at toward the bottom of the post.

The caption is now aligned.
Still, the images display as if aligned from the top.
See how the 2 images just above are aligned in a better way.

Please note that I have no control on the image since they are actually Custom html code (except if you tell me we can customize it too).
How can I then improve this?

[Author]

Posts