Portfolio page - mobile unfriendly?

Hello,

I am having issues with the portfolio page on mobile. The portfolio page is here http://andrei-badea.com/portfolio/ and viewed on mobile devices, it doesn’t look so good - https://www.screencast.com/t/SwjGDlyhoEY0.

The frontpage widget works fine on both PC and mobile.

Any fix, please?

Thank you,
andrei

Hey there,
Hope you’re doing well today

Kindly add and save the following code to Appearance > Customize > Additional CSS:

@media(max-width: 550px){
  article#post-41 {
    margin-top: 38px!Important;
}
}

@media(max-width: 550px){
  .masonry.masonryFlyIn.fadeIn {
    height: 100%!Important;
}
}

@media (max-width: 550px){
.post-type-archive-jetpack-portfolio article#post-124 {
    margin-left: 214px!Important;
    margin-top: -63px!Important;
}}

@media (max-width: 550px){
.post-type-archive-jetpack-portfolio article#post-41 {
    margin-top: -58px!Important;
    margin-left: 214px!important;
}}

@media (max-width: 550px){
.post-type-archive-jetpack-portfolio article#post-122 {
    margin-top: 120px!Important;
}}

I hope this helps :slight_smile:

Best Regards,
Support

Thank you! This works for the smartphone, but the tablet version is unaffected. Any fix for that?

Hello there,

I hope you are doing well today.

Please try using the following CSS code:


/*Media queries*/
@media (max-width: 1000px) and (min-width: 550px){
  article#post-41 {
    margin-top: 38px!Important;
}
}

@media (max-width: 1000px) and (min-width: 550px){
  .masonry.masonryFlyIn.fadeIn {
    height: 100%!Important;
}
}

@media (max-width: 1000px) and (min-width: 550px){
.post-type-archive-jetpack-portfolio article#post-124 {
    margin-left: 214px!Important;
    margin-top: -63px!Important;
}}

@media (max-width: 1000px) and (min-width: 550px){
.post-type-archive-jetpack-portfolio article#post-41 {
    margin-top: -58px!Important;
    margin-left: 214px!important;
}}

@media (max-width: 1000px) and (min-width: 550px){
.post-type-archive-jetpack-portfolio article#post-122 {
    margin-top: 120px!Important;
}}

Best Regards,
Support

Thanks for the reply.
It worked after a bit of tweaking for the values, but I decided to go with the portfolio shortcode for the gallery page.

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support