removing excerpt text from latest post widget on mobile

What I would do, instead of hiding the text, is to add another media query to your custom CSS that puts each Latest News box in its own row instead of having two side=by-side on a mobile phone:

@media only screen and (max-width: 400px) {
  .latest_post_holder.one_columns>ul>li, .latest_post_holder.boxes.four_columns>ul>li {
    width: 100% !important;
  }
}

Adjust the max-width value depending upon what breakpoint you want.

However, if you still want to hide the text, you can add this CSS instead:

@media only screen and (max-width: 400px) {
   .latest_post_holder.boxes>ul>li .latest_post p.excerpt {
     display: none;
  }
}

Or, you can combine both rules and have the thumbnails stacked on top of one another with no text.

I’m trying to make it a 2×2 grid of recent posts on mobile if that helps so that there is more content on less screen.

That second code worked thank you! Would you have any advice on the CSS styling to make it more like this example here padding is an issue that i’m still working on trying to figure out.

Try adding these rules to the same media query:

.latest_post_holder.boxes>ul>li .latest_post {
  padding: 0;
}
.latest_post_holder .post_info_section:before {
   content: '';
}
.additional_read_more {
   display: none;
}
.latest_post_holder.boxes.four_columns>ul>li:nth-child(2n) {
   margin: 0 !important;
}
.latest_post_holder.one_columns>ul>li, .latest_post_holder.boxes.four_columns>ul>li {
   margin: 0 !important;
   padding: 3px !important;
}

Wow! Thanks! That worked BEAUTIFULLY. Learning so much. You rock. Thanks for helping me out.

??

Actually man, for some reason, that code works in removing the read more on mobile which is great..

however it’s shifting the boxes to the left, and leaving quite a bit of space on the right. Make sit very unappealing.

Am I doing something wrong?

This is what my css looks like:

.title:not(.breadcrumbs_title) .title_holder {
height: 100%!important;
padding: 0px 0!important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.latest_post_holder.boxes>ul>li .latest_post {
padding-left: 0;
padding-right: 0;
}

@media only screen and (max-width: 400px) {
.latest_post_holder.boxes>ul>li .latest_post p.excerpt {
display: none;
}
}

.filter_outer { text-align:center !important; }

.additional_read_more {
display:inline-block;
border:1px solid #000;
padding:10px;
background-color:#fff;
color:#000;
-webkit-transition:all 0.3s ease-in-out !important;
transition:all 0.3s ease-in-out !important;
}

.additional_read_more:hover {
border:1px solid #000;
padding:10px;
background-color:#fff;
color:#333;
}

@media only screen and (min-width: 115px) and (max-width: 768px) {
.latest_post_holder.one_columns>ul>li, .latest_post_holder.boxes.four_columns>ul>li {
width: 49% !important;
padding: 0px !important;
}
}

however it’s shifting the boxes to the left, and leaving quite a bit of space on the right.

It looks OK on my iPhone, which is the same as if I make my browser narrow. i don’t see the images shifted to the left.

Not on mobile, on the full screen browser

Ah, OK, now I understand, you are referring to the Continue Reading/Read More boxes. I don’t remember how it looked before, was it shifted to the right or centered?

It you want the box shifted to the right, then you want to add float: right; to the rule for .additional_read_more. If you want the box centered, then you want to add this instead:

display: table;
margin: 0 auto;

No no, the entire box is shfiting on full screen mode

example: here

and now, for some reason on mobile, the boxes are still there. It’s weird.

Can you take a look at my css and tell me what I may be doing wrong, or may be out of place?

.title:not(.breadcrumbs_title) .title_holder {
  height: 100%!important;
  padding: 0px 0!important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.filter_outer { text-align:center !important; }

@media only screen and (max-width: 400px) {
   .latest_post_holder.boxes>ul>li .latest_post p.excerpt {
     display: none;
  }
}
.latest_post_holder.boxes>ul>li .latest_post {
  padding: 0;
}
.latest_post_holder .post_info_section:before {
   content: '';
}
.additional_read_more {
   display: none;
}
.latest_post_holder.boxes.four_columns>ul>li:nth-child(2n) {
   margin: 0 !important;
}
.latest_post_holder.one_columns>ul>li, .latest_post_holder.boxes.four_columns>ul>li {
   margin: 0 !important;
   padding: 3px !important;
}

@media only screen and (min-width: 115px) and (max-width: 768px) {
  .latest_post_holder.one_columns>ul>li, .latest_post_holder.boxes.four_columns>ul>li {
    width: 49% !important;
    padding: 0px !important;
  }
}
.additional_read_more {
    display:inline-block;
    border:1px solid #000;
    padding:10px;
    background-color:#fff;
    color:#000;
    -webkit-transition:all 0.3s ease-in-out !important;
    transition:all 0.3s ease-in-out !important;
    }

.additional_read_more:hover {
    border:1px solid #000;
    padding:10px;
    background-color:#fff;
    color:#333;
    }

.latest_post_holder.boxes>ul>li .latest_post {

padding-left: 0;

padding-right: 0;

}

OK, so what happened was I asked that you put those new rules inside the previous media query so that they would only be in effect on a mobile phone. The media query looks like this:

@media only screen and (max-width: 400px) {

[all the new rules should be inside here]

}

Because they are not, the rules which set the margins to zero are always in effect, even at desktop widths. If you like the smaller margins, you can just make the boxes wider by adding this rule:

@media only screen and (min-width: 1000px) {
   .latest_post_holder.boxes.four_columns>ul>li {
     width: 25%;
   }
}

By the way, at the very end of your custom CSS, you are missing a closing right brace for the last rule, so it’s not having any affect.

Giving up :'(

.additional_read_more {
    display:inline-block;
    border:1px solid #2b2b2b;
    padding:10px;
    background-color:#259fa8;
    color:#fff;
    -webkit-transition:all 0.3s ease-in-out !important;
    transition:all 0.3s ease-in-out !important;
    }

.additional_read_more:hover {
    border:1px solid #259fa8;
    padding:10px;
    background-color:#fff;
    color:#2b2b2b;
    }

@media only screen and (max-width: 400px) {
  .latest_post_holder.boxes>ul>li .latest_post p.excerpt {
     display: none;
.latest_post_holder.boxes>ul>li .latest_post {
  padding: 0;
}
.latest_post_holder .post_info_section:before {
   content: '';
}
.additional_read_more {
   display: none;
}
.latest_post_holder.boxes.four_columns>ul>li:nth-child(2n) {
   margin: 0 !important;
}
.latest_post_holder.one_columns>ul>li, .latest_post_holder.boxes.four_columns>ul>li {
   margin: 0 !important;
   padding: 3px !important;
  }

@media only screen and (min-width: 115px) and (max-width: 768px) {
  .latest_post_holder.one_columns>ul>li, .latest_post_holder.boxes.four_columns>ul>li {
    width: 49% !important;
    padding: 0px !important;

.latest_post_holder.boxes>ul>li .latest_post {

padding-left: 0;

padding-right: 0;

}
  }
}

is ending up the way my website is set up now. The continue reading button is now stuck there on mobile.

I literally just want what herschel has an I cannot achieve the mobile/responsive look of their latest post..

I actually ended up figuring it out! I was just putting things in my css randomly but things to your advice, I realized all @media things need to be in one category!

Thanks man…

Do you know how to give the individual posts some betweeen them? The padding has virtually been eliminated.

figured that out too!