Titles in portfolio image block using mobile version

Site URL: https://www.imkemol.com

Dear all, 

My girlfriend is an actress, I am making her a portfolio website as a birthday gift. (www.imkemol.com ; password "imkeislief") 

The PC version shows titles to the sub-pages when you hover your mouse over the images in the home page. This isn't the case for the mobile version, either you press one of the images or you don't but you don't see the animation that occurs when you hover a computer mouse over the image. Right now its difficult to navigate the mobile page because it doesn't show any of the titles to the sub pages. 

Is there any way to lock the titles to the sub-pages in the mobile version? (for instance, permanently showing 'actrice' on the picture of her wearing the blue shirt). 

Thanks! 

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.portfolio-text {
    opacity: 1 !important;
}
}

Thats awesome! Thank you very much! 

The result was that the black text isnt readable clearly since the pictures are also quite dark. 

I was playing around a bit and entered the following: 

@media screen and (max-width:767px) {
.portfolio-text {
    opacity: 1 !important; text-align: right !important; padding: 200px 10px !important;
}
}
@media screen and (max-width:767px) {
.portfolio-text > h3 {
    color: white !important; 
}
}

This results in making the text white, and placing it in the lower right corner. 

However, strangely enough now when I visit the webiste on my mobile phone the placement of the text isnt fixed. When I scroll through the page I can swipe the text up and down a little bit. What is happening here? And how can I fix it? 

Hi, I am trying to do this for this site but the code doesn't work - https://tinyurl.com/27nc9a5s

Thanks in advance

On 1/23/2022 at 9:01 AM, minnieosc123 said:

Hi, I am trying to do this for this site but the code doesn't work - https://tinyurl.com/27nc9a5s

Thanks in advance

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1559772166379_3687 .summary-content {
    opacity: 1 !important;
}
}

On 10/25/2020 at 10:15 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.portfolio-text {
    opacity: 1 !important;
}
}

 

Thank you so much ! That;s worked perfectly