Portfolio is not responsive on mobile at all

Shapely
1

This theme is SO SO WONDERFUL, but only on PC, I`m afraid. On mobile, the portfolio is completely unresponsive. By this, I mean the photos are squished up onto one side, and it looks unprofessional and messy on my site. I was wondering about two points, so this can be a truly “responsive” theme.

  1. Making the portfolio thumbnails full screen on mobile (see my screenshot of how they are small and uneven and squished to the side)

  2. Showing the titles of the project so people know that each one is a link to something different.

You provided some custom CSS for #2 to someone else who asked here but it is not working on mine:

@media (max-width: 890px){
.flexible_home_portfolio .inner-title.hover-reveal .title {
opacity: 1;
top: 30%;
}
}

my site is www.mishajanette.com and I am trying on safari and chrome on mobile.

2

Hi @mishajanette,

I hope you are well today and thanks for posting here.

1. Making the portfolio thumbnails full screen on mobile (see my screenshot of how they are small and uneven and squished to the side)

To achieve this please try adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other


@media (max-width: 890px){
body.post-type-archive-jetpack-portfolio .masonry article {
    position: static !important;
}
}
2. Showing the titles of the project so people know that each one is a link to something different.

Try using the below CSS code.

@media (max-width: 890px){
#page .shapely_home_portfolio .inner-title .title {
    opacity: 1;
    top: 30%;
}
}

Best Regards,
Movin

3

Hi Movin,

The CSS for making images full screen on mobile worked perfectly!

But the titles still aren’t appearing on mobile for safari or chrome. Do you have another suggestion?

Even if I could put a message at the top like, “Please click each photo to see the project” or something so people know that each photo is a link on mobile.

Best,
M

4

For dispalying the titles please try using the below CSS code.



@media (max-width: 890px){
body.post-type-archive-jetpack-portfolio #page .inner-title .title,
#page .shapely_home_portfolio .inner-title .title {
    opacity: 1;
    top: 30%;
}
}
5

This is incredible, the theme looks so nice on mobile!!! Really beautiful!! Thank you so much and have a great day!

6

You are most welcome here :slight_smile:

7

Hi, I’m having the same issue with my website, I tried adding the code above however it did not work.

Website: http://glimpsesnz.com

8

@danj This is old topic and to help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/shapely/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

9

https://colorlibsupport.com/t/full-width-thumbnails-on-portfolio-in-mobile/

New Thread

Thanks Movin

10

Thank you for creating a new topic.

Your new topic will be replied ASAP.

11

@Movin there has still been no response.

12

@danj Sorry for the delay and thank you for your patience.

I have replied to your topic so please reply there.