Jump to content

Text moving by it's own, on phone only

Recommended Posts

Hey all,

I just find a strange responsive issue on phone.

Yesterday I was just checking our website, the eshop side, and I upload a video of what I get.

I was on my iPhone 12, and first the text doesn't moved, but when I come back to the top it's begin to change the size of the police like my resolution of my phone was changing too?

If somebody had already this issues, let me know please 🙂

Have a great day,

Cheers

PF Bug.MOV

 

Edited by DylanCasasnovas
Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Can you share your website URL?

It looks like the fonts a changing size based on the vertical viewport height, so when the bar at the bottom appears, the height shrinks and so does the text. I'm not sure why this is happening though! Have you custom coded anything?

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
42 minutes ago, Ziggy said:

Can you share your website URL?

It looks like the fonts a changing size based on the vertical viewport height, so when the bar at the bottom appears, the height shrinks and so does the text. I'm not sure why this is happening though! Have you custom coded anything?

Hey Ziggy, yeah sure the website url is :

www.plasticfils.com

but you can see the page where the fonts move on www.plasticfils.com/eshop/p/coeur-porte-cles/ or any others products from the shop.

 

Also, I copy paste all the custom code a friend made for us, because I'm really, really not a dev... :

#block-yui_3_17_2_1_1659600649253_13947 {
 margin: auto;
 width: 38%;
}
.burger {
 margin: -10%;
 width: 50%;
background-image: url('https://static1.squarespace.com/static/62e269ac43f50737498e08c5/t/62eb9db11c1f24124d24ad82/1659608497416/pngwing.com.png%27');
background-size: contain;
background-repeat: no-repeat;
background-position: right;
background-color: transparent !important;
height: 25px; 
}
.burger-inner {
display: none; 
}
.products.collection-content-wrapper .grid-meta-status{
color: black!important;
}
@media (min-width: 850px) {
.header-nav-list :nth-child(3) {
 display: none;
}
}
.header-menu-cta {
display:none!important;
}.product-mark {
margin-top:3%;
}
.header-nav-list :nth-child(4) {
display : none!important;
}
header-menu-nav-folder-content :nth-child(3) {
display : none!important;
}
.ProductItem-nav .ProductItem-nav-breadcrumb {
display: block!important;
}
.background-pause-button {
 display: none!important;
}
.ProductItem-details .variant-select-wrapper, .ProductItem-details .product-quantity-input input { 
padding : 0.5rem; 
}
.variant-option-title, .quantity-label {
font-weight: 700;
}

 

Thanks in advance for the help 🙂

 

Link to comment

I don't believe that it's your CSS. I can see the problem is what I thought, the font changing size when the viewport changes height, in this case when the navigation bar appears and disappears.

Can you share this with Squarespace Support? Get their input?

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
2 hours ago, Ziggy said:

I don't believe that it's your CSS. I can see the problem is what I thought, the font changing size when the viewport changes height, in this case when the navigation bar appears and disappears.

Can you share this with Squarespace Support? Get their input?

 

Yep sure I can 🙂

Where I need to go to do that? Is there a mail or something?

Let me know and thanks for the fast check up !

 

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.