Adjusting few typography size of my website.

This topic has 21 replies, 4 voices, and was last updated 8 years, 4 months ago ago by Jack Richardson

  • Avatar: Eric
    Eric
    Participant
    November 3, 2015 at 10:29

    I’d like to adjust few typography size of my website, please see this link.

    Home and golbally.
    1. The words on global top bar, I’d like to set it as H4.
    2. The words on global main menu, I’d like to set it as H3, and submenu as H4.
    https://drive.google.com/file/d/0B0UZ77fMI9c0eVBRR3dvQ00zcU0/view?usp=sharing

    Single product page.
    1. The words on Product description, set it as H3.
    2. The words on Product short brief, set it as H4.
    3. The words on all Custom tabs, set it as H3.
    4. The words on Product detail content, set it as H4.
    https://drive.google.com/file/d/0B0UZ77fMI9c0cFd5N1JjUGprazA/view?usp=sharing
    https://drive.google.com/file/d/0B0UZ77fMI9c0QlpwU2R3NlJlVTA/view?usp=sharing

    Please tell me how to custom them from CSS,thank you very much..~

    Regards,
    Eric

    20 Answers
    Avatar: Eva
    Eva Kemp
    Support staff
    November 3, 2015 at 10:54

    Hello,

    1. Please use this code in Global Custom CSS:

    .header-type-9 .top-bar a {
      font-size: 15px !important;
    }

    2. Please use this css code:

    .menu > li > a {
        font-size: 18px !important;
    }
    .menu .nav-sublist-dropdown ul > li > a {
        font-size: 15px;
    }

    Single product page.
    1. Add this code in Global Custom CSS:

    .meta-title span {
       font-size: 18px;
    }

    2. Use the following code:

    .product-information .short-description p {
       font-size: 15px;
    }

    3. Add this css code:

    .tabs .tab-title {
        font-size: 18px;
    }
    .tabs .tab-content p {
      font-size: 15px;
    }

    Regards,
    Eva Kemp.

    Avatar: Eric
    Eric
    Participant
    November 7, 2015 at 09:43

    Dear Eva,

    Thanks for your help, I solve these problems, they looks great in desktop screen, thank you.

    But there’s another problems when I check my website from mobile, I found these problems happened in
    its portrait or landscape way. Please check and help.

    Testing page: http://store.yoz.tw/%E5%95%86%E5%93%81/fashion-demo-5/ (Single product page)
    Test mobile: iPhone 6

    Please check these problems and see pictures below.

    1. The breadcrumb are squeezed together, if its length is longer than screen width, it should be break with 2 lines.

    2 The icon word “Sale” is not in its central position.
    https://drive.google.com/file/d/0B0UZ77fMI9c0dXZLNm5RNkwwNU0/view?usp=sharing
    https://drive.google.com/file/d/0B0UZ77fMI9c0T2tiUEJYYUhWcEE/view?usp=sharing
    https://drive.google.com/file/d/0B0UZ77fMI9c0cFlCTlNCZ0Q2RUE/view?usp=sharing

    3.”Product description” area top padding is higher than bottom padding, it’s better top padding the same with bottom padding.

    4.”Add to Wishlist” and “Email to a friend” text are squeezed together, please help me hide “Email to a friend” text in mobile screen.
    https://drive.google.com/file/d/0B0UZ77fMI9c0TW9UUThuQUNmWUU/view?usp=sharing
    https://drive.google.com/file/d/0B0UZ77fMI9c0aHVTME1mQzRkNU0/view?usp=sharing
    https://drive.google.com/file/d/0B0UZ77fMI9c0MTdaUlVJSHI5Wnc/view?usp=sharing

    5.In Product TAB such as “Product detail”, “Additional infomation”, “Product gurantee”, “Return and exchange” area, words even whole paragraph are missed.
    1). Words between

    html tag.
    2). Words in column such as “color” and “size result”.
    3). “returns and exchanges” TAB paragraph one.
    https://drive.google.com/file/d/0B0UZ77fMI9c0QWNPRDZlM3AwUlk/view?usp=sharing
    https://drive.google.com/file/d/0B0UZ77fMI9c0MVFZMjJPemFid0k/view?usp=sharing
    https://drive.google.com/file/d/0B0UZ77fMI9c0UGlPQkxRcHJ2d0k/view?usp=sharing
    https://drive.google.com/file/d/0B0UZ77fMI9c0M3k0dVFVbnczQVU/view?usp=sharing
    https://drive.google.com/file/d/0B0UZ77fMI9c0WXVuMU9FUXFfVmc/view?usp=sharing
    https://drive.google.com/file/d/0B0UZ77fMI9c0dl9RTWlSQXpBZE0/view?usp=sharing

    6.Mobile in landscape screen, the Product TAB its “title” and “content” are squeezed to be wrong position.
    https://drive.google.com/file/d/0B0UZ77fMI9c0a3lRYVdONnJleGc/view?usp=sharing
    https://drive.google.com/file/d/0B0UZ77fMI9c0M3k0dVFVbnczQVU/view?usp=sharing

    Best regards,
    Eric

    Please, contact administrator
    for this information.
    Avatar: Eva
    Eva Kemp
    Support staff
    November 9, 2015 at 16:42

    Hello,

    1./2. I’ve checked your page and don’t see any issues:
    http://storage9.static.itmages.com/i/15/1109/h_1447083240_1136395_375c6f223d.png

    Does the problem persist only on iPhone or Android devices too?

    3./4./5./6. Sorry, but I can’t replicate the issues:
    http://storage2.static.itmages.com/i/15/1109/h_1447083557_5833698_d2285905a4.png
    http://storage1.static.itmages.com/i/15/1109/h_1447083664_6929914_c4991079bc.png

    What OS are you using?
    Try to check the page with other Internet provider.

    Regards,
    Eva Kemp.

    Avatar: Eric
    Eric
    Participant
    November 9, 2015 at 18:35

    Dear Eva,

    Do you check with in iPhone6 (iOS9) Safari browser?
    I do find the wrong “position” page in that mobile!!!
    And all these pictures are shoted from the iPhone6 screen.

    That’s a big big problem, because there’re around 40% people use iPhone in my country!
    If your theme could not provide the correct page as it was, it means that my website will provide a very worse user experience to 40% people who using iPhone!

    Please do check it again.
    Regards,
    Eric

    Avatar: Eric
    Eric
    Participant
    November 12, 2015 at 03:50

    Hi, there

    If there’s nobody to explain or solve this problem, I think Woopress theme is not so called “Responsive” theme, and I will ask for refund.

    Please solve these iOS 9 mobile problems! It’s very important for every buyer.

    Regards,
    Eric

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    November 12, 2015 at 10:59

    Hello,

    Your problem related to font family that you applied

    font-family: 'cwTeX Yen', sans-serif;

    That’s why when you have combination of english and chinese characters you see that problem.

    Regards

    Avatar: Eric
    Eric
    Participant
    November 13, 2015 at 03:42

    you erase all my CSS adjusting in backend?

    Avatar: Eric
    Eric
    Participant
    November 13, 2015 at 04:22

    Yes, one month ago, for some typography reasons, I add ‘cwTeX Yen’ into CSS, if that’s the reason why mobile page shows wrong position, I’ll try to remove it.

    Actually, if you guys want to check these bug issues, you have to inform your client to remove all their adjusting. Right now, all my settings back to the default status, what would I do? What would you do? That’s your customer service?

    Eric

    Avatar: Eric
    Eric
    Participant
    November 13, 2015 at 09:29

    AFTER I CHECK MY STYLE.CSS FILE, I DIDN’T FIND ANY ‘cwTeX Yen’, THE STYLE.CSS FILE IS UPDATE BY YOU. CHECK THIS PICTURE.
    https://drive.google.com/file/d/0B0UZ77fMI9c0R01FcFMycFFXaU0/view?usp=sharing

    SINCE YOU UPDATE MY STYLE.CSS FILE, YOU ERASED ALL MY ADUSTING CSS.
    THESE PRODUCT PAGE PROBLEMS STILL EXIST. IT’S NOT AS YOU SAID THE PROBLEMS CAUSED “FONT CHANGED” BY ME.

    IF YOU GUYS COULD NOT FIX THE PRODUCT PAGE PROBLEMS, HOW COULD YOU SAID WOOPRESS IS A RESPONSIVE THEME? THAT’S BAD.

    WHAT’S WRONG WITH IT?

    ERIC

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    November 13, 2015 at 10:59

    Hello,

    Take my apologies, I should have let you know beforehand about updates we plan to do. But if you need to change something in template files you need to use child theme, because every time when you update theme you’ll loose the changes you made!

    Please, re-upload native theme files, remove all the changes or files you additionally added, disable all the third-party plugins that may cause the problem and check if the problem persists. Because we still see the same styles while inspecting some problem elements
    http://prntscr.com/928c23

    We are not responsible for the changes made by our clients that cause issues with theme functionality. Check our demo, do you see this problem too?

    Regards

    Avatar: Eric
    Eric
    Participant
    November 16, 2015 at 03:27

    OK, I’ll check again and re-upload it.
    I take your pology, hope that never do it again. Since customer need your help, you have to try anyway not to destory what they have done before.

    regards

    Avatar: Eva
    Eva Kemp
    Support staff
    November 16, 2015 at 11:59

    Hello,

    Thank you for your understanding.

    Please let us know the result and if further assistance is needed.

    Regards,
    Eva Kemp.

    Avatar: Eric
    Eric
    Participant
    November 24, 2015 at 11:56

    Hi,

    After I removed the inappropriate font type, those missed word in mobile is recovered.
    But there comes another problem, which small pictures under main product picture with shortcut js effect is missed.

    Please see this https://drive.google.com/file/d/0B0UZ77fMI9c0bHNFY0xiOG16Qlk/view?usp=sharing
    I didn’t do anything to your source code, what happened? How to fix it?

    Regards,
    Eric

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    November 24, 2015 at 12:16

    Hello,

    Go to Theme Options > Single Product Page > Enable slider for gallery images > On.
    After that check images.

    Best regards,
    Jack Richardson.

    Avatar: Eric
    Eric
    Participant
    November 24, 2015 at 18:23

    Hi,

    About this issue there is onething left.
    As I wrote at November 7, 2015 at 9:43 am, mentioned about these…
    『 4.”Add to Wishlist” and “Email to a friend” text are squeezed together, please help me hide “Email to a friend” text in mobile screen.
    https://drive.google.com/file/d/0B0UZ77fMI9c0TW9UUThuQUNmWUU/view?usp=sharing

    After your adjusted, there onle with “Email to a friend” left on desktop and mobile screen one product pages, but not “Add to Wishlist” mobile screen only.

    Would you please let “Add to Wishlist” only on mobile page but not “Email to a friend” on both pages?

    Regards

    Avatar: Eva
    Eva Kemp
    Support staff
    November 24, 2015 at 20:40

    Hello,

    Please add this code in Theme Options > Custom CSS > Global Custom CSS:

    .product-information .email-link {
      display: none;
    }

    and this code in Custom CSS for desktop:

    .product-information .yith-wcwl-add-to-wishlist {
        display: none;
    }

    Regards,
    Eva Kemp.

    Avatar: Eric
    Eric
    Participant
    November 25, 2015 at 08:41

    Dear Eva,

    Thank you, the problem is solved.

    One more thing…
    When I check mobile screen in landscape position, those TAB titles in single page product page are squeezed to each TAB description title, please help me to place TAB titles upper their position and each TAB description title be aligned to left side. Thanks

    Please check this picture.
    https://drive.google.com/file/d/0B0UZ77fMI9c0SWlrOHZVYllNNDg/view?usp=sharing

    Regards,
    Eric

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    November 25, 2015 at 08:55

    Hello,

    Please add this code in Theme Options > Custom CSS > Custom CSS for mobile landscape:

    .tabs .tabs-nav {
       float: left !important;
    }

    Best regards,
    Jack Richardson.

    Avatar: Eric
    Eric
    Participant
    November 25, 2015 at 18:43

    Hi Jack,

    It’s better, but could those TAB Titles be moved to the middle position? the upper side padding is too height.

    Pls see this pic.
    https://drive.google.com/file/d/0B0UZ77fMI9c0SHZsWVpBNm13VDQ/view?usp=sharing

    Regards,
    Eric

  • 1 2
    Viewing 20 results - 1 through 20 (of 21 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.