I was able to find a solution looking into your tutorial https://toolset.com/documentation/user-guides/learn-creating-using-grids/
I took out the divs from the post listing view template ,
so I end up with this code:
<div class="magazine_post">
[wpv-post-featured-image] [wpv-post-link] [wpv-post-excerpt length="100"]
</div> <!-- end #magazine_post -->
<div class="clear"></div>
then I added span class to each field in the Category Posts Listing view
then I put the css from your tutorial in base theme because it didn´t work in the magazine child theme
/**
* sidebar del view y luego CSS del post listing
*/
#magazine_view_wrapper .magazine_list_title {
padding-bottom: 10px;
}
#magazine_view_wrapper table tr td {
width: 50%;
vertical-align: top;
}
#magazine_view_wrapper div.clear {
clear: both;
}
/**
* Post iteration styles sidebar
*/
.magazine_post {
clear: both;
height: 170px;
width: 263px;
}
.magazine_posts_list ul li {
list-style-type: none;
margin-left: 0px;
margin-bottom: 10px;
border-bottom: 1px solid gray;
padding-bottom: 8px;
padding-right: 10px;
}
.magazine_posts_list p {
font-size: 13px;
}
.magazine_posts_list .magazine_post_featured {
float: left;
padding-right: 8px;
}
.magazine_posts_list .magazine_post_title {
font-weight: bold;
margin-bottom: 5px;
}
.magazine_list_content {
padding: 0px 5px;
}
.magazine_list_content ul li {
}
/**
* Slider styles
*/
.magazine_slide h3.slider_title {
margin-bottom: 10px;
font-weight: bold;
}
/**
* with this I get rid of the bullet title
*/
div.entry-content li{
margin:0 0 0 20px; list-style: none;
}
.magazine_post_featured_2 {
float:left;
margin-right:7px;
}
Thanks for your tutorials it helps a lot , i wish you could do some more with step by step strategy, I help you If you need some help =)