[Gelöst] Table Grind content – third row is not having same size

[Author]

Artikel

[jorg-andreasK]

Hi there from Germany,...

Im trying to layout a table based grid for post with my individual styling and additional fields for WP posts.
For whatever reason I can`t find out, why the columns are not identical, do not have the same width.

The HTML Code for the attached grid shown in the attached jpg is:

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<table style="" width="100%" class="wpv-loop js-wpv-loop">
<wpv-loop wrap="3" pad="true">
[wpv-item index=1]
<tr>
<td>
[wpv-post-body view_template="Loop item in Blogview 3er quer"]
</td>
[wpv-item index=other]
<td>
[wpv-post-body view_template="Loop item in Blogview 3er quer"]
</td>
[wpv-item index=pad]
<td> </td>
[wpv-item index=pad-last]
<td> </td>
</tr>
</wpv-loop>
</table>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

related css

table {
/*background-color: #efefef;*/
border: none;
}
td {
padding: 8px;
border: none;
max-width: 33%!important;

Template for the view:

<div class="postitem_wrapper_post">
<div class="posttitel_wrapper"><h2 class="posttitel">[wpv-post-title]</h2></div>
<div class="image_div"; style="background-image: url('[wpv-post-featured-image size='full' output='url']'); background-size: cover; background-position: center center; height: 160px;"> <div class="zweite-ueberschrift">[types field="zweite-ueberschrift"][/types]</div>
</div>
<div class="aufmacher">[wpv-post-excerpt]</div>
<a href="[wpv-post-url]">Jetzt lesen!</a>
</div>

CSS for the Template:

.postitem_wrapper_post {
/*background-color: #efefef;*/
height: 650px !important;
width: 100%;
}

.image_div {
width: 100%;
background-color: #ff0000;
position: relative

}
.posttitel_wrapper {
height: 150 px !important;
}
.posttitel {
font-size: 24px;
text-transform: uppercase;
}
.zweite-ueberschrift {
background-color: #ffffff !important;
color: red;
position: absolute;
bottom: 0;
padding: 2px 2px 2px 0px;
}
.aufmacher {
margin-top: 16px;
}

Can you help me?

All the best from Germany

Jörg

[Christian Cox]

Hi, I can see that you're using a table layout, and the td has a max-width value of 33%!important in your CSS. I think this is the main problem, because there is no specified width, only a max-width. Table cells are not designed to be equal width by default, so if there is a wide image in one grid item it will expand that column width. If you want equal width cells, you must style them to be equal width using specific CSS. I think your td CSS should be:

td {
border: none;
width: 33%;
}

I'm not certain, because I would need to see this in a browser. But I think this is what's happening. I should also point out that table-based layouts are difficult to read on smaller screen sizes. I would consider a responsive Bootstrap grid instead of a table grid, so the results are easy to read on different devices, unless you have a very good reason for using tables.

[jorg-andreasK]

Hi Christian,...

I followed your advice and did it with a Bootstrap grid.

Unfortunately, like in the table version too, the post image is only shown in the first post column.

Any idea,... what happens here? The image is there? Please see the attached file

Loop editor says:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<div class="container wpv-loop js-wpv-loop">
	<wpv-loop wrap="3" pad="true">
		[wpv-item index=1]
		<div class="row ">
			<div class="col-sm-4">[wpv-post-body view_template="Loop item in Bootstrap grid 3er quer"]</div>
		[wpv-item index=other]
			<div class="col-sm-4">[wpv-post-body view_template="Loop item in Bootstrap grid 3er quer"]</div>
		[wpv-item index=3]
			<div class="col-sm-4">[wpv-post-body view_template="Loop item in Bootstrap grid 3er quer"]</div>
		</div>
		[wpv-item index=pad]
			<div class="col-sm-4"></div>
		[wpv-item index=pad-last]
			<div class="col-sm-4"></div>
		</div>
	</wpv-loop>
	</div>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

Template for the view:

<div class="postitem_wrapper_post">
  <div class="posttitel_wrapper"> 
  <h2 class="posttitel">[wpv-post-title]</h2>
  </div> 
  <div class="image_div"; style="background-image: url('[wpv-post-featured-image size='full' output='url']'); background-size: cover; background-position: center center;">   
   <div class="zweite-ueberschrift">[types field="zweite-ueberschrift"][/types]</div>
    </div>
<div class="aufmacher">[wpv-post-excerpt]
<a href="[wpv-post-url]">Jetzt lesen!</a></div>
</div> 

[Christian Cox]

Check this line, remove the semi-colon after the class attribute:

<div class="image_div"; style="background-image: url('[wpv-post-featured-image size='full' output='url']'); background-size: cover; background-position: center center;">

If that does resolve the problem, then move the wpv-post-featured-image shortcode outside of the div and test it alone:

[wpv-post-featured-image size='full' output='url']
<div class="image_div"; style="background-image: url('[wpv-post-featured-image size='full' output='url']'); background-size: cover; background-position: center center;">
...

Does it output the correct URL for each post's featured image?

[jorg-andreasK]

Hi Christian,... thx for your soon reply,...

But finally both tips did not solve the problems.

Yes, I can rebuilt it to a image usage with out putting it in a DIV, but asI wanted to but an additional Headline on top of the image it is a different solution.

I still can't use the image as a background in a div with the above code,... ? Sure,.. the images are there an do work stand alone.

Jörg

[Christian Cox]

May I log in and see this on your site? Please provide login credentials in the private reply fields here and let me know the URL where I can find this View on your site.

[jorg-andreasK]

Did you get my last reply?

I can`find it in my ticket view,... but it is counted in the number threats.

I also sent you login credentials

Jörg

[Christian Cox]

Hi, I received a private reply dated today at 7:01am, followed by your last reply dated at 7:17am. It included the login credentials, a screenshot, and some information about where to find the grid problem.

I see this custom CSS on your site, which is breaking the grid:

/* ----------------------------------------- */
/* View: Bootstrap grid 3er quer - Start */
/* ----------------------------------------- */
.container wpv-loop js-wpv-loop {
   width: 1100px
   padding: 0;
   margin: 30px;
}
.row {
   width: 1100px;
   padding: 0;
}
.col-sm-4 {
   width: 340px;
   padding: 0;
   margin-right: 25px;
}
.col-sm-4:nth-child(3), .col-sm-4:nth-child(6), .col-sm-4:nth-child(9), .col-sm-4:nth-child(12) {
   width: 340px;
   float: left;
   padding: 0;
   margin-right: 0px;
}
/* ----------------------------------------- */
/* View: Bootstrap grid 3er quer - Ende */
/* ----------------------------------------- */

Once you delete this code, apply the standard responsive grid classes necessary to show different numbers of columns of results at different resolutions. The following grid classes will show full-width results on mobile, two columns on tablet, and 3 columns on desktop:

class="col-xs-12 col-sm-6 col-md-4" 

Please review the grid system documentation here for more information about responsive grid techniques: hidden link

If you want to modify or override the Bootstrap grid system using custom CSS, that falls outside the scope of support we provide here in the forums. I strongly suggest you do not attempt to override or modify Bootstrap's grid class styles unless you know what you're doing and have a good reason to do it.

[jorg-andreasK]

Hi Chris,...

Thx for your reply.

Again, I followed your advice, while creating a new test page, which you only can see if you are logged in: hidden link.

So after deleting any CSS for the rows and columns of bootstrap as requested it does not fit to the requested size of 100% which is 1100px in this case. even on a desktop,... not talking about mobile or tablet yet.

In my understanding it should, or not? Is it a integration problem with generatePress or elementor? Or still a missunderstanding from my side?

Jörg

[Shane Supporter Languages: Englisch (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Jorg,

As christian is currently on vacation. I will be handling this ticket.

Taking a look at this, your issue is that the rows of the table are different sizes in terms of length correct?

You want them to all be the same height correct?

Please let me know.

Thanks,
Shane

[jorg-andreasK]

Thx Shane, but I I found a different work around. For now it works

Jörg