Jump to content

Portfolio Titles misaligned during mobile view

Go to solution Solved by Ziggy,

Recommended Posts

Dear Community,

during the mobile view, the portfolio titles ("Project Sanddune", "WIne Masterclasses", "Bespoke Perfume") are showing off misaligned. They are centered as they should, but at the same time with a kind of indent starting with each Title?

The desktop version doesnt need any code to show it centered.

I've managed to find a css code to change the alignment from left to right or to center (posted below). However, while it changes the alignment to left or right, when centered it shows the same misalignment.

Maybe worth noting, that the portfolio titles (PS, WM, BP) have a mouseover image effect on the desktop version, not sure if that factors in when dealing with the mobile view.

Is this solvable?

Would be delighted about any tips 🙂

Thanks!

Max

 

 

Edit: Maybe it has to do with the line break, so if the titles cannot be truly centered, maybe the two words of each title (project sanddune, wine masterclasses, bespoke perfume) can be forced into one line respectively during mobile view, which would then be alignment properly just like during the desktop view?

 

.portfolio-hover-items {
    text-align: left !important;
    align-items: flex-start !important;
}

.portfolio-hover-items-list {
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

 

mobile view_liminal wine.jpeg

desktop view_liminal wine.png

Edited by mtschudi
thoughts
Link to comment
  • Replies 3
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

  • Solution

Try this Custom CSS:

@media only screen and (max-width:767px) {
  .portfolio-hover[data-horizontal-align="center"][data-mode="hover-cover"] .portfolio-hover-item-content, .portfolio-hover[data-horizontal-align="center"][data-mode="hover-cover"] .portfolio-hover-item-title::after {
    margin-right: 0rem;
    margin-left: 0rem;
  }
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
27 minutes ago, mtschudi said:

Thank you a lot, Ziggy you-ve made my day!

Excellent!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.