Rev Slider Responsive

Support
#1

Hey,

i have the Problem that my Rev Slider is on mobile device not full visible. The half of it is under the navbar hide.
I had the problem on desktop as well but put this code for desktop version in custom css:
/* To make it overlap with slider */
.masthead.masthead-inline {
position: fixed;
z-index: 9999;
width: 100%;
top: 0;
background: transparent;
}
Is there the Oppertunity to get this running for mobile.

My adress ist www.konnex.gmbh

Also my Mobile Menu does not show everything, i can scroll.

I hope someone can help, ty to everybody.

#2

Hi there,

Please try this:

@media (max-width: 480px) {
    .x-slider-container {
        margin-top: 200px;
    }
}

Hope this helps.

#3

Wow worked perfect.

the last prob is, if see now on mobile my website, the menu button is not in same row as the logo. is there a oppertunity to resize the logo when its on mobile.

Ur Support is awsome.

#4

Hi There,

Please also add this custom CSS:

@media (max-width: 480px){
    .x-brand img {
        width: 250px;
    }
}
@media (max-width: 320px){
    .x-brand img {
        width: 150px;
    }
}

Let us know how it goes!

#5

no sorry, the logo doesnt change … the Menu is still under the brand. U have another idea? Thank you

#6

Hello @DennisHartmann,

Have you removed the code shared by my colleague as I don’t see on browser console? I checked the code on my end and it’s working perfectly fine. Please see screencast. https://screencast.com/t/5TBQ1FSsVV

Please add the code under X > Launch > Options > CSS and let us know how it goes.

Thanks.

#7

Hey,

this my css code i got in the Custimizer:

footer.x-colophon.bottom {
background-color: black;
}

/* To make it overlap with slider */
.masthead.masthead-inline {
position: fixed;
z-index: 9999;
width: 100%;
top: 0;
background: transparent;
}

@media (max-width: 480px) {
.x-slider-container {
margin-top: 200px;
}
}

@media (max-width: 480px){
.x-brand img {
width: 250px;
}
}
@media (max-width: 320px){
.x-brand img {
width: 150px;
}
}

thats all i got

#8

and thats my code from X > Launch > Options > CSS

/*
// Typography.
*/

h1, .h1,
h2, .h2,
h3, .h3 {
line-height: 1.3;
}

h4, .h4,
h5, .h5
h6, .h6 {
line-height: 1.5;
}

input[type=text],
input[type=email] {
height: 50px;
border-radius: 3px;
}

/*
// Masthead.
*/

.masthead {
position: absolute;
width: 100%;
}

.single-post .masthead {
position: relative;
width: auto;
background-color: #001937;
}

@media (max-width: 979px) {
.masthead {
position: relative;
width: auto;
background-color: #001937;
}
}

/*
// Utilities.
*/

.vat { vertical-align: top !important; }
.vam { vertical-align: middle !important; }
.vab { vertical-align: bottom !important; }

#9

Hi,

Please replace this code

@media (max-width: 480px){
    .x-brand img {
        width: 250px;
    }
}
@media (max-width: 320px){
    .x-brand img {
        width: 150px;
    }
}

with this

@media (max-width: 1354px) {
.x-nav-wrap.desktop {
    display: none;
}
.masthead-inline .x-btn-navbar {
    display: block;
    float: right;
}

.x-nav-wrap.mobile {
    display: block;
}

.x-nav-wrap.mobile.collapse {
    display: none;
}

.x-nav-wrap.mobile.collapse.in {
    display: block;
}
}

Hope that helps.

#10

Hey guys, realy im impressed of ur support… I found a way now , how to get the solution.

My Final question is how can i make Startscreen with the picture the headline and the 2 boxes responsive. Dont have clue why it does not resize when i go as iphone 6

www.konnex.gmbh

#11

Hi,

Please use Settings > Responsive Text

To know more about responsive text, please check it from our knowledge base here:
https://community.theme.co/kb/shortcode-walkthrough-responsive-text/2
http://demo.theme.co/integrity-1/shortcodes/responsive-text/

Hope this helps.

#12

the first page cant be found and on the second it doesnt help me mich. Im Using Renew…
When i go under setting and add some responsive text it doesent appear anywhere

#13

Sorry, it was from the old version.

Please see screenshots below.

Then add selector in the class field of your headline element

#14

Hey thank u for ur amazing support.

found the options now. But when i put these on the class field on my start page on the " KONNEX" its still half shown on mobile…

Can u help me?

www.konnex.gmbh

#15

Hey @DennisHartmann,

In the screenshot that @paul.r has posted previously, there’s a dot in the class field. If you copied that in your setup, please remove it.

To see an actual usage, please view this screencast. https://www.youtube.com/watch?v=_ia5Lswi3ak

Thanks.

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.