[Urgent] Reduction of white spaces in Mobile View

Started by: Himanshu Jagdish Sheth July 24, 2017 - 20:35

Please have a look at the site in mobile view There is huge amount real estate on the mobile screen that is wasted and would like to reduce the same.

PS - All queries are only for the mobile view

1. Space between Address and Phone Number - As seen from https://prnt.sc/fzrteu and https://prnt.sc/fzruqr there is huge space between Address and Phone number (Also the box containing this information is huge), how can I reduce the line spacing as well as reduce the size of the container.

2. Move the Our Services information after the logo - Can we move the Our Services information below the logo (which is currently occupied by Address and Phone Number). That information can be moved to the end of the page.

3. Reduction of the content in vc_view - As seen from http://prntscr.com/fzrw86 the font on the mobile is huge (40px) and spoils the entire experience. Can you share the custom CSS to customize that font size across the entire site.

4. Image size reduction and consistent font on all pages - Please refer https://prnt.sc/fzrz2j Would like to reduce the font size for the content present on all the pages (including vc_view, H1, H2, body, etc.). Also, as you can see the image does not fit the mobile screen. Would like to have a constant dimension for all the images used on the site so it looks good on mobile view (I have already changed the size of the logo for the mobile view).



Replies:

  • #4801 Reply

    Himanshu Jagdish Sheth
    Can someone please reply to this post? It is urgent and hence it is marked the same.
    Author Team
    #4803 Reply

    Felix
    Hi,
    1.Please try to use this custom style: @media only screen and (max-width: 991px){ .icon_text .text { line-height: 0.4;}} You can edit margin for the "Our Services" heading via editing the page.
    2.It needs to customize the theme templates in order to realize your request.
    3-4.Please try to use this custom style: @media only screen and (max-width: 991px) {.vc_custom_heading h2{font-size: 20px !important;}}
    .wpb_text_column table, .comment-body .comment-text table {width: 100% !important;}
    @media only screen and (max-width: 991px){ p, span {font-size: 14px !important;}}
    #4908 Reply

    Himanshu Jagdish Sheth
    Thanks Felix for the fix, it works fine. The images still dont auto-resize on the mobile screen, can you please share the custom CSS for that as well.

    Thanks in advance.

    Author Team
    #4918 Reply

    Axel
    Please try to use Single Image module in order to add your images to your content.

    Regards

    #4947 Reply

    Himanshu Jagdish Sheth
    Thanks @Axel, it worked :)
    Author Team
    #4954 Reply

    Axel
    You are welcome!
You must be logged in to reply to this topic.