Layout portfolio items in mobile view

[Tierramitica]

Hello team!!! I was able to change the lay-out of my portfolio items the way I wanted using a code snippet I found on the forum:

.single-x-portfolio .entry-featured {
width: 60%;
}
.single-x-portfolio .entry-wrap {
float: middle;
width: 40%;
}

So far so good, looks good in desktop view, but my problem is that this does not look good at all in mobile view, basically it should just stay as it was before I added this piece of code, the photo on top and the text underneath neatly centered, but that is now not the case, everything is scrambled. Could you please help me make it so that the above code only applies for big screens and the default remains for smaller screens? I would really appreciate that! Thank you.

[ruenel]

Hello Mitica,

Thanks for writing in!

With your custom css code, it will be applied throughout all screen sizes. We highly recommend that that you update your code and use this:

@media(min-width: 980px){
  .single-x-portfolio .entry-featured {
    width: 60%;
  }

  .single-x-portfolio .entry-wrap {
    float: middle;
    width: 40%;
  }
}

This code will ensure that the custom code will only be applied to screen size with 980 pixels and above.

We would love to know if this has worked for you. Thank you.

[Tierramitica]

It works!!! Hurray!! Thank you so much!!

[friech]

We are delighted to assist you with this.

Cheers!