Text Size Changes

[Leatherlips]

I'm not sure what is happening, but sometimes seemingly at random, the text size changes to a different size when viewed on a mobile device. I have attached a couple of pictures to show what I mean. In picture 1, the size is as it should be, the default text size. In picture 2 the text size is much smaller. I did not make it smaller. In the editor and when viewing on a computer, the text size is correct.

You will notice the text has picture elements next to it. That seems to be what is causing it. Any ideas?

Picture 1 with correct size     Picture 2 with incorrect smaller size

[Adam7]

Thanks for your post, @Leatherlips. Can you post links to both pages of your site so we can take a look?

[PaulMathews]

@Adam The web page the user is indicating as problematic is here:

https://www.mangionemagic.com/other-artists.html

I checked this out (css media query on desktop browser shrunk to mobile screen size and also looked at it on an Android phone) but could not replicate the issue or see any obvious code issue. Did not check it on iOS.

[Leatherlips]

@PaulMathews The page you listed is correct. It also happens on these pages as well: https://www.mangionemagic.com/chucks-discography.html and https://www.mangionemagic.com/gaps-discography.html At the top of those pages, on a computer (Windows 10) the "Click the images for details" text is the correct size. On my Android phone, the text is much smaller. Thanks for investigating for me.

[PaulMathews]

I do see that there is a media query for viewports at least 767px wide that changes the paragraph (via div.paragraph) font size (among other things) to 19px. The default body font size is 16px. I don't see a media query on the paragraph class for viewports smaller than 767px which means that paragraph text will fall back to the default body font size of 16px (which is why paragraph text is smaller on mobile than on desktop). In your original post, you indicated (or at least I understood) that the paragraph text was different sizes in two different places on the page in mobile view. If you meant that the text size was smaller on mobile than on desktop then, yes, that is indeed the case and it is a result of the paragraph media query.

@media screen and (min-width: 767px)
.wsite-elements.wsite-not-footer:not(.wsite-header-elements) div.paragraph, .wsite-elements.wsite-not-footer:not(.wsite-header-elements) p, .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .product-block .product-title, .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .product-description, .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .wsite-form-field label, .wsite-elements.wsite-not-footer:not(.wsite-header-elements) .wsite-form-field label, #wsite-content div.paragraph, #wsite-content p, #wsite-content .product-block .product-title, #wsite-content .product-description, #wsite-content .wsite-form-field label, #wsite-content .wsite-form-field label, .blog-sidebar div.paragraph, .blog-sidebar p, .blog-sidebar .wsite-form-field label, .blog-sidebar .wsite-form-field label {
    font-size: 19px !important;
    line-height: 36px !important;
}

[Leatherlips]

In mobile view, the text is two different sizes when it should all be the same size. If you look elsewhere on the page, you can see the normal size. But when you get to the sections I referred to above, the text is smaller. I do not understand what caused it to get smaller in that section only.

[Bernadette3]

I don't believe Adam saw your replies after his initial question, but I'll forward the post to him when he returns on Sunday. 

[Adam7]

Can you take a screenshot of what you see with your Android device? I checked on my iPhone and the text on the first page is all the same size, and matches the text size on other pages of the site. There are some font-weight differences with the captions for images, but the size is consistent for me.

[Leatherlips]

Here is a screenshot of part of the page. The part in the red box is too small. The part in the green box is correct. They both should be the same size. I did not change them in the editor.

It all looks correct in the Weebly Editor and on my desktop computer.

I also just checked, the problem is only in portrait mode. If I hold my phone horizontally, all of the text is the same size on the page.

[Adam7]

Is that this page? The content is different so I'm assuming it's not, but I can't seem to find a page about that album with the text in your screenshot.

[Leatherlips]

@Adam 

Here is the link to the page in question: https://www.mangionemagic.com/other-artists.html 

[Adam7]

Thanks! Interesting.. for me the text is the same size. What device are you using?

[Leatherlips]

I am using an Android phone. This is not a big deal, just wondering what is causing it.

[Adam7]

Out of curiosity, was the all the text written directly in text elements or pasted in?