Featured posts dispaying incorrectly

Hi There,

Hope you can help. Why do my featured posts look like this? Some of those featured posts are sitting over the top of the main post:

Your help will be appreciated.

Thanks

Hello there,

Do you have a link to your site, so I can have a look directly?

Regards,
Kharis

Hi @kharisblank,

Thanks for your quick response. Unfortunately no, I have it locally, I have pasted below the output HTML if that helps: Any other way I can help you help me? :slight_smile:

    <div id="pg-28-1" class="panel-grid panel-has-style">
   <div class="siteorigin-panels-stretch panel-row-style panel-row-style-for-28-1" style="padding: 30px 0px; margin-left: -141.5px; margin-right: -141.5px; border-left: 0px; border-right: 0px;" data-stretch-type="full-stretched">
      <div id="pgc-28-1-0" class="panel-grid-cell" style="padding-left: 0px; padding-right: 0px;">
         <div id="panel-28-1-0-0" class="so-panel widget widget_athemes-featured-posts-type-a athemes_featured_posts_type_a panel-first-child panel-last-child" data-index="1">
            <div class="sticky-posts-blocks sticky-posts isotope-gallery" style="position: relative; height: 564px;">
               <div class="col-sm-3 grid-sizer"></div>
               <div class="col-sm-6 col-md-3 featured-item sticky-post post sticky-post-style2" style="position: absolute; left: 0px; top: 0px;">
                  <img width="360" height="328" src="http://localhost/NSC-Global-Jobs/wp-content/uploads/2019/09/jamaica.jpg" class="attachment-greatmag-featured-c size-greatmag-featured-c wp-post-image" alt="" srcset="http://localhost/NSC-Global-Jobs/wp-content/uploads/2019/09/jamaica.jpg 360w, http://localhost/NSC-Global-Jobs/wp-content/uploads/2019/09/jamaica-300x273.jpg 300w" sizes="(max-width: 360px) 100vw, 360px">					
                  <div class="this-contents">
                     <h6 class="post-cat big-bline"><span class="ispan"><a data-color="#26ab9a" style="color:#26ab9a;" href="http://localhost/NSC-Global-Jobs/category/uncategorised/" title="Uncategorised">Uncategorised</a><span style="background-color:#26ab9a;"></span></span></h6>
                     <a href="http://localhost/NSC-Global-Jobs/2019/09/11/sed-quis-lorem/" class="post-title-standard">Sed quis lorem</a>
                  </div>
               </div>
               <div class="col-sm-6 col-md-6 featured-item sticky-post post sticky-post-style2" style="position: absolute; left: 370px; top: 0px;">
                  <img width="352" height="236" src="http://localhost/NSC-Global-Jobs/wp-content/uploads/2019/09/bali.jpg" class="attachment-greatmag-featured-a size-greatmag-featured-a wp-post-image" alt="" srcset="http://localhost/NSC-Global-Jobs/wp-content/uploads/2019/09/bali.jpg 352w, http://localhost/NSC-Global-Jobs/wp-content/uploads/2019/09/bali-300x201.jpg 300w, http://localhost/NSC-Global-Jobs/wp-content/uploads/2019/09/bali-270x180.jpg 270w" sizes="(max-width: 352px) 100vw, 352px">					
                  <div class="this-contents">
                     <h6 class="post-cat big-bline"><span class="ispan"><a data-color="#26ab9a" style="color:#26ab9a;" href="http://localhost/NSC-Global-Jobs/category/uncategorised/" title="Uncategorised">Uncategorised</a><span style="background-color:#26ab9a;"></span></span></h6>
                     <a href="http://localhost/NSC-Global-Jobs/2019/09/11/lorem-ipsum/" class="post-title-big">Lorem ipsum</a>
                     <h5 class="post-meta"><a href="http://localhost/NSC-Global-Jobs/author/sean/" class="author">Sean</a>  -  <a href="http://localhost/NSC-Global-Jobs/2019/09/11/lorem-ipsum/" class="date">11th September 2019</a></h5>
                  </div>
               </div>
               <div class="col-sm-6 col-md-3 featured-item sticky-post post sticky-post-style2" style="position: absolute; left: 1112px; top: 0px;">
                  <img width="360" height="328" src="http://localhost/NSC-Global-Jobs/wp-content/uploads/2019/09/los-angeles.jpg" class="attachment-greatmag-featured-c size-greatmag-featured-c wp-post-image" alt="" srcset="http://localhost/NSC-Global-Jobs/wp-content/uploads/2019/09/los-angeles.jpg 360w, http://localhost/NSC-Global-Jobs/wp-content/uploads/2019/09/los-angeles-300x273.jpg 300w" sizes="(max-width: 360px) 100vw, 360px">					
                  <div class="this-contents">
                     <h6 class="post-cat big-bline"><span class="ispan"><a data-color="#26ab9a" style="color:#26ab9a;" href="http://localhost/NSC-Global-Jobs/category/uncategorised/" title="Uncategorised">Uncategorised</a><span style="background-color:#26ab9a;"></span></span></h6>
                     <a href="http://localhost/NSC-Global-Jobs/2019/09/11/top-10-jobs-for-august/" class="post-title-standard">Top 10 Jobs for August</a>
                  </div>
               </div>
               <div class="col-sm-6 col-md-3 featured-item sticky-post post sticky-post-style2" style="position: absolute; left: 370px; top: 236px;">
                  <img width="360" height="328" src="http://localhost/NSC-Global-Jobs/wp-content/uploads/2019/09/barcelona.jpg" class="attachment-greatmag-featured-c size-greatmag-featured-c wp-post-image" alt="" srcset="http://localhost/NSC-Global-Jobs/wp-content/uploads/2019/09/barcelona.jpg 360w, http://localhost/NSC-Global-Jobs/wp-content/uploads/2019/09/barcelona-300x273.jpg 300w" sizes="(max-width: 360px) 100vw, 360px">					
                  <div class="this-contents">
                     <h6 class="post-cat big-bline"><span class="ispan"><a data-color="#26ab9a" style="color:#26ab9a;" href="http://localhost/NSC-Global-Jobs/category/uncategorised/" title="Uncategorised">Uncategorised</a><span style="background-color:#26ab9a;"></span></span></h6>
                     <a href="http://localhost/NSC-Global-Jobs/2019/09/11/why-work-at-nsc/" class="post-title-standard">Why work at nsc}?</a>
                  </div>
               </div>
               <div class="col-sm-6 col-md-3 featured-item sticky-post post sticky-post-style2" style="position: absolute; left: 741px; top: 236px;">
                  <img width="360" height="328" src="http://localhost/NSC-Global-Jobs/wp-content/uploads/2019/09/amsterdam.jpg" class="attachment-greatmag-featured-c size-greatmag-featured-c wp-post-image" alt="" srcset="http://localhost/NSC-Global-Jobs/wp-content/uploads/2019/09/amsterdam.jpg 360w, http://localhost/NSC-Global-Jobs/wp-content/uploads/2019/09/amsterdam-300x273.jpg 300w" sizes="(max-width: 360px) 100vw, 360px">					
                  <div class="this-contents">
                     <h6 class="post-cat big-bline"><span class="ispan"><a data-color="#26ab9a" style="color:#26ab9a;" href="http://localhost/NSC-Global-Jobs/category/uncategorised/" title="Uncategorised">Uncategorised</a><span style="background-color:#26ab9a;"></span></span></h6>
                     <a href="http://localhost/NSC-Global-Jobs/2019/09/11/interview-tips/" class="post-title-standard">Interview Tips</a>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

Thanks again.

Hello there,

Copied code from local installation doesn’t seem to work for me. Because all images are missing. Would it be better to share your site’s URL when it goes live?

Regards,
Kharis

Hi Kharis,

Have chucked the site up on a free hosting platform: https://testing0812.000webhostapp.com still gets a layout issue in a different way.

Hope you can help.

Thanks

Hello there,

It looks like the issue is with small image size you’re using.

Replace this

with something similar to

Regards,
Kharis