Okay
  Public Ticket #3132744
Reduce Titles and Margins
Closed

Comments

  •  4
    mitsus started the conversation

    Dear Barry,

    I've some questions:

    - How can I reduce the h1.caption-heading-tag into the sliders only for mobile version? (See attachment  reduce_slider_title_mobile.png)

    - How can I reduce the h2.widget-title into the pages only for mobile version? (see attachment reduce_page_titles_mobile.png)

    - How can reduce slider text/button margins (up and down) only for mobile version? (see attachment Slider_Text_margins_mobile.png)


    Thanks a lot for your availability.

    BR

    Francesco

  •  1,332
    Barry replied

    Hi Francesco,

    Thank you for your message.

    For point 1 and 2 you can copy/paste the following CSS in to Appearance -> Customize -> Additional CSS:

    /* Mobile styles only */
    @media (max-width: 991px) {
        .jumbotron .jumbotron-caption .caption-heading .caption-heading-tag {
            font-size: 40px;
        }
        .widget-title {
            font-size: 36px;
        }
        .bigger-widget-title .widget-title {
            font-size: 46px;
        }
    }
    

    The 40px can be changed for the slider heading on mobile

    The 36px and 46px values can be changed for the widget title sizes on mobile

    Only the last point I don't really understand what you would like to change exactly. Unfortunately your attachments did not came with your ticket. Could you include the screenshot again in a new reply so I have a better understanding about what you would like to change?

    Thanks.

    Best regards,
    Barry
    QreativeThemes.com  |  WordPress Themes

  •  4
    mitsus replied

    Sorry Barry,

    I've forgot to upload attachments :(.

    Below the screenshot that explain (using red arrows) what I need to do.

    Sorry again

    BR

    Francesco

    Attached files:  Slider_Text_margins_mobile.png

  •  1,332
    Barry replied

    I see, thank you for adding the screenshot.

    Please replace I provided in my previous reply with this:

    /* Mobile styles only */
    @media (max-width: 991px) {
        .jumbotron .jumbotron-caption .caption-heading .caption-heading-tag {
            font-size: 40px;
        }
        .widget-title {
            font-size: 36px;
        }
        .bigger-widget-title .widget-title {
            font-size: 46px;
        }
        .jumbotron .jumbotron-caption {
            padding: 30px 0;
        }
    }
    

    The 30px value can be increased/decreased to achieve what you've pointed out on the screenshot.

    Hope this helps.

    Best regards,
    Barry
    QreativeThemes.com  |  WordPress Themes