Architect2 - Mobile View of Portfolio not good

vanreduzier · April 2020

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 · April 2020

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

vanreduzier · April 2020

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 · May 2020

Good Job

Architect2 - Mobile View of Portfolio not good

Comments