Not responsive

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10034681
    taqigates
    Participant

    I made https://www.rawatmakan.com website using Porto HTML theme. Everything seems good but my website is not responsive.

    Please suggest me what can be done to make it complete responsive.



    Template Version: 8.0
    #10034684
    Support
    Keymaster

    Hello,

    1) For the slider texts you can use responsive levels of slider. You can try increase the font size on mobile screen. You can control the font size of each slide layer trough data-fontsize=”[‘xx’,’xx’,’xx’,’xx’]” attribute. For example:

    data-fontsize=”[’22’,’22’,’22’,’40’]”

    This is the same as:
    – font size of 22px at mobile screens
    – font size of 22px at tablet screens
    – font size of 22px at large/laptop screens
    – font size of 40px at extra large/desktop screens

    You can use these responsive levels for all layers inside the revolution slider. For example to have different positions on each screen:

    data-x=”center” data-hoffset=”[‘125′,’125′,’125′,’215’]”
    data-y=”center” data-voffset=”[‘-50′,’-50′,’-50′,’-75′]”

    Learn more about Revolution Slider responsive setup here:

    Responsive Setup

    2) It’s missing the HTML code to show mobile menu button. Add the HTML code below side a side with <div class="header-nav-main.......". For example:

    ...
    ....
    .......
    <div class="header-nav header-nav-links order-2 order-lg-1 justify-content-center">
        <div class="header-nav-main header-nav-main-square header-nav-main-effect-2 header-nav-main-sub-effect-1">............</div>
        <button class="btn header-btn-collapse-nav" data-toggle="collapse" data-target=".header-nav-main nav">
            <i class="fas fa-bars"></i>
        </button>
    </div>
    ..
    .....
    ........

    3) IN the section below:

    Change the class pr-5 to pr-lg-5.

    4) In the section below has a white space:

    This is being caused because you are defining max-width. You should remove this max-width in the HTML source code. Instead of it you can create a custom class and apply only on big resolutions. For example:

    HTML:

    <div class="custom-max-width-110px">
        <img src="images/al-hashar.png" alt="Al Hashar Group">
    </div>

    Add in (css/custom.css):

    @media(min-width: 992px) {
        .custom-max-width-110px {
            max-width: 110px;
        }
    }

    5) In the section below:

    Remove the code marked with red square.

    We hope this helps!

    Kind Regards,

    Rodrigo.


    If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads


    #10034691
    taqigates
    Participant

    Can you please check now, the menu button is not working.


    #10034704
    Support
    Keymaster

    Hello,

    We replied for you about that in the other ticket you opened:

    Site Responsive

    Please check there.

    Kind Regards,

    Rodrigo.


    If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads


Viewing 4 posts - 1 through 4 (of 4 total)

This topic is marked as "RESOLVED" and can not rceive new replies.