Make font smaller on mobile

[alibey]

the site looks awesome on the desktop.
it does not on mobile devices.
Two issues:

1) is there a way to easily make smaller on mobile device without my having to write media query rules?
i expect this to be a built in UI-issue that swift ideas has already implemented/solved in atelier.
the problem is that the overly large text — which is fine on the desktop with a large screen — look pretty ugly on a mobile device.

2) for some reason, the header/menu area for my site is minuscule when the site is viewed on a mobile device.
how do i make the header/menu portion of my site proportional in size to the much larger text below it?

Thanks!

[alibey]

site went live today, on 10-9-15.
would really appreciate any pointers re resizing text on mobile devices as soon as possible.
i am familiar with media queries.
but i am asking is there anything out of the box from atelier than i can do to reduce text size depending on display size, short of my having to write a significant amount of custom css.
after all, this is one of the main reasons why i bought atelier in the first place: to spare me the hassle of dealing with responsiveness issues.
thanks.

[David Martin – Support]

Hi,

What text is specifically larger? Looking at the site, everything looks correct – could you add a screenshot so we can provide you with further help.

You would indeed need to add media queries if you want to alter the font sizing on different screen sizes, we can happily help you with this.

Thanks,
David.

[Rui Guerreiro – SUPPORT]

Hi,

Guess the solution will have to be with custom css. It’s almost impossible to automatically the size of the letter depending on the amount of words.

Can you provide us a couple specific examples? Maybe with a couple of rules of css this can be adjusted.

This is what I’m currently seeing in the mobile. What you have in mind? any mockup?

-Rui

[alibey]

hi i dont actually know how to take screen shots of the samsung galaxy s5 screen! i will research this and try to send you the pics as soon as i learn how to do it!

basically what looks bad is when you go into the catalog and then you see the product descriptors (price, size, mesh, sku, price) overly large in relation to the size of the image of the canvas. they should be smaller, tighter, more proportional, IMHO.

ditto the top line menu bar/ header area, which should be bigger…. as it is too small in relation to what is going on below it.

i have no problem writing the media queries, as i am very comfortable with css3 etc… and it would be really great if you guys can give me a hint about the correct way to go about this.

again thanks.

[David Martin – Support]

Hi,

Here are some example media queries that you can use to alter the single product elements:

Single Product SKU, Category, Tag:

@media only screen and (max-width: 767px) {
	.summary .product_meta {
	    font-size: 12px;
	}
}

Single Product Title

@media only screen and (max-width: 767px) {
	.woocommerce div.product div.summary .summary-top h1 {
	    font-size: 20px;
	}
}

Single Product Size:

@media only screen and (max-width: 767px) {
	.woocommerce div.product .product-short h5 {
	    font-size: 14px;
	}
}

Thanks,
David.

[alibey]

thanks david / i did a c and paste of your code
and retried it on a samsung galaxy s5 device / display mode is standard, not Easy Font (in case you might be wondering about that)

it did not seem to have any effect on the size of the short descriptions etc

in addition the ADD to Cart plus the item count and the Wish list are all way off in terms of size and quite frankly look absolutely horrible if not downright amateurish / i am very sorry to put it so harshly!

i did a survey of the user base a month ago and 30% use mobile devices so this has to be fixed

btw i made the related posts ID hidden because woocommerce’s idea of related is to randomly pick something from the same category and sometimes the results are nonoptimal, so i have disabled related feature across the board

the result looks okay on the desktop but on the mobile platform there is now this gaping hole between the item price and the cart / which also needs to be fixed somehow

but that aside, when the quantity does not fit properly in the item number box, there is something way off here

any advice much appreciated, but i wonder how much atelier testing for the woocommerce catalog was done in responsive mode android platforms / or is this strictly a woocommerce thing?

again much thanks for any help

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

It’s possible your custom font is contributing to this, how does this demo page look on your phone? http://swiftideas.com/product/plain-backpack/.

When I login with those login details I cannot access your wp-admin, does that user have full permissions?

If you are adding the custom code to your theme options CSS option, you will need to purge your plugin cache.

Here is the product short description CSS also:

@media only screen and (max-width: 767px) {
.woocommerce div.product .product-short { 
    font-size: 12px;
}
}

If you want to target your device (samsung galaxy s5) specifically with a media query you will need to use this specific media query:

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3){
    ADD YOUR CSS
}

Thanks,
David.

[alibey]

>It’s possible your custom font is contributing to this, how does this demo page look on your phone? http://swiftideas.com/product/plain-backpack/.

attached is a screeshot on a samsung galaxy s5, standard mode (ie regular font size), as to how the atelier demo look. you can clearly see the problem with the item quantity box.

When I login with those login details I cannot access your wp-admin, does that user have full permissions?

sorry, nothing personal, but the admin login has access to credit card info now so it cannot be shared outside my client’s env for security reasons.

If you are adding the custom code to your theme options CSS option, you will need to purge your plugin cache.

siteground server cache purged, browser cache purged, same results.

attached below you will see a pic of the home page of my site on a desktop machine.
then you will see a pic of it on a mobile device. clearly the shopping cart and search icon collapsed on top of one another is a problem. as is the size the site’s header, which is out of proportion to the body of a page on a mobile device.

i have attached various other mobile screenshots that show the variety of problems with the catalog on a mobile device.

i find it hard to believe that i am the first and only one who has come across these problems. be that as it may, they need to be fixed, and would appreciate any insight as to how to go about this.

thank you.

Attachments:

You must be logged in to view attached files.

[alibey]

final pic — so as you can see from these various screen shots, compared to the desktop version
there are multiple issues, even with your own atelier demo

so the question is, how to fix this and quickly?
it is almost as there is a need for some global switch in your atelier drop down sidebar thing to allow the user (ie, people like me) to see what this looks like in desktop, notepad, and mobile modes

since 30 per cent of my client’s customers use mobile, and there is going to be a big push when we leverage the woocommerce add on to be on FB (where many of my clients belong to a SIG), i am going to be patient and try to solve responsive related problems with you guys as quickly as possible, problems that i thought would have been taken care of already for a theme that has been out for a year

otherwise we will unfortunately have to eventually migrate to another solution i regret to say, especially given the whole security issue that has just come to light

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

If you want to see what your site looks like in multiple devices, you can use the Chrome Web Inspector.

Inspect Element => Toggle Device Mode. Select your device, then reload the page.

Can you test that also, I am interested to see the difference between the emulator and actual device render.

Thanks,
David.

[alibey]

thanks for the tip re Inspector.
i would be happy to test and compare, but it has to wait 1 day due to other priorities.
if it turns out that i can help you guys and my client to achieve a dynamite Atelier look on mobile, that would be great.
just so you know, to me the standard fantastic look on mobile is STRIPE. those Irish boys really know what they’re doing! and you London guys, too, of course!
cheers
Ali

[Kyle – SUPPORT]

No problem, thanks David