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

@minnieosc123 who used your code above figured out how to do this on his mobile version - first screenshot. However on my mobile portfolio page I've only been able to get the fixed text to work. Any thoughts? See last photo for what it looks like on my computer with the green overlay upon hovering.

reneebyers.com mobile site works perfectly for this.

24 minutes ago, gardenlady said:

 

@tuanphan  the code works perfectly on my site also however I want to show a darker green or just darker overlay on the images to make the text work. It seems 

@minnieosc123 who used your code above figured out how to do this on his mobile version - first screenshot. However on my mobile portfolio page I've only been able to get the fixed text to work. Any thoughts? See last photo for what it looks like on my computer with the green overlay upon hovering.

reneebyers.com mobile site works perfectly for this.

So now you want to show overlay color?

What is your site url?

13 hours ago, gardenlady said:

I think I was able to get it to work from another post of yours I found - but I'm struggling with two things on the portfolio pages themselves: 

www.ashleylloydgardens.com/projects/contemporary-woodland-retreat

pw SPRING24

1. wondering how does one change the pagenation text on the portfolio pages to be "previous"/"next" rather than the project names themselves? is that possible?

2. I really want my portfolio block with the underline animation to not go onto multiple lines like this - see image - I want it to be like it appears on this website (at the very bottom of page) - when you view his site on the mobile (see second photo attached on right) it fits within the screen as opposed to mine (first photo attached) that the line gets broken up when viewing on mobile  -  http://danpearsonstudio.com/the-garden-museum/

#1. Use this CSS code

/* prev next */
.item-pagination[data-collection-type^="portfolio"] h2 {
    visibility: hidden;
}
a.item-pagination-link.item-pagination-link--next h2:after {
    content: "next";
    visibility: visible;
}
.item-pagination-link--prev h2:before {
    content: "previous";
    visibility: visible;
}

#2. Can you share link to page in screenshot?

@tuanphan Sharing link - http://danpearsonstudio.com/the-garden-museum/

4 hours ago, gardenlady said:

@tuanphan Sharing link - http://danpearsonstudio.com/the-garden-museum/

 

I meant page on your site