Architect2 - Mobile View of Portfolio not good

vanreduzier

Hey,

i have a problem with the "Architect2" Theme:

https://themes.muffingroup.com/be/architect2/realizations/

If you see this in mobile-Version you only see "read more" but we would need the name of the project, just like in desktop view. Only seeing "read more" in mobile is very unpractical...

Is it possible you could tell us a small code snippet how to archive this ?

Thank you!

Best Wishes
Dennis

Pablo

Hello,

Yes, we can change that but on smaller devices it will not work fine, I mean, the image will not be visible.

Test it by yourself, paste it into the Theme Options > Custom CSS & JS > CSS

@media (max-width:768px){
	.portfolio-details .details{display:block !important;}
	.portfolio-details .more{display:none !important;}
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

vanreduzier

Thank you very much!

I edited the code a bit more in regards of styling and now its working perfectly in mobile with smaller text!

@media (max-width:768px){
.portfolio-details .details{display:block !important;}
.portfolio-details .more{display:none !important;}
.portfolio-photo .portfolio-item .portfolio-details .details .title {
font-size: 12px;
line-height: 14px;
border-bottom: 1px solid rgba(0,0,0,.1);
padding-bottom: 7px;
margin-bottom: 6px;
}
.portfolio-photo .portfolio-item .portfolio-details .details {
position: absolute;
z-index: 2;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width: 240px;
padding: 10px 20px;
text-align: center;
}
.categories {
font-size: 10px;
}
.portfolio-photo .portfolio-item .portfolio-details .details, .portfolio-photo .portfolio-item .portfolio-details .more {
background: rgba(255, 255, 255, 0.95);;
}
}

Bryan

Good Job

Learn more: Video Tutorials | How To | FAQ Vote on what comes next