Reply To: Not responsive

#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