Mobile version: Title portfolio Page

  • mer

    (@merettekuijt)


    2 years, 9 months ago

    Hi,

    I was wondering if it is possible to have the title of the portfolio page be visible by default just for the mobile version of the website?

    For the web version the title appears on the hover, but as the hover does not work for the mobile version, you now first have to click it to make the title appear.

    I would like to have the title visible by default on the mobile version, while the web version the title appears on the hover.

    • This topic was modified 2 years, 9 months ago by mer.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi! You would need to add some custom CSS under Customize > Additional CSS.

    Something like this may work. It makes the project-info title visible on any screen that is 600px or narrower.

    @media screen and (max-width: 600px) {
.project-info {
    opacity: 1;
  }
}

    That puts the title right in the middle of the picture, without any dark overlay to offset the white text. But you could add more options if you’d like. For example, you could replace that code with this:

    @media screen and (max-width: 600px) {
.project-info {
    opacity: 1; /* Makes it visible on smaller screens */
    background-color: #000000aa; /* darken the background */
    height: 2em; /* make the title area shorter */
    width: auto; /* instead of centered full width, move it to the left */    
  }
}

    You would want to tweak it to your liking – take out the lines you don’t need, experiment with others. Hoping this helps!

    Thread Starter mer

    (@merettekuijt)

    Hi,

    Thank you so much!
    Works like a charm.

    Cheers!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Mobile version: Title portfolio Page’ is closed to new replies.