Docs

[Hugobosss]

Hi!

I have a few issues on my mobile version of http://www.hofverbergphotography.se and I am not sure if it’s cause by some custom CSS I got from you over the time or if the site is setup incorrectly.

1. The slider image on the home page only shows half the image, it’s like the image just continues beyond the screen edge.

2. The “card” below the slider with information about myself isn’t responsive on mobile.

Please advice!
Thanks!

[Rupok]

Hi there,

Thanks for writing in!

#1. Are you referring this? – http://prntscr.com/au18ct

It seems fine and usual as the background-size is set to cover which gives the best possible responsiveness. If you have other concern then clarify with a screenshot.

#2. It seems you have set width: 500px; for the card (maybe on Style field). You can use max-width: 500px; instead.

Hope this helps.

Cheers!

[Hugobosss]

Hi!

1. I would rather have a small slider showing the whole image for mobile, which option should I choose for this?

2. That solved it.

Thanks for your help!

[Lely]

Hi There,

You’re welcome!

1.) Instead of adding the image as background to the slide, please add an IMAGE LAYER instead.
See this:http://screencast-o-matic.com/watch/cDfqln1C9g

Hope this helps.

[Hugobosss]

Hi!

I added an image layer on the slide and it now looks as attached on mobile.
On monitor it looks just like before.

Would appreciate some further assistance 🙂
Thanks!

[Rupok]

Hi there,

Thank for updating. If you want to display full image (using background image) then you can use this CSS :

@media only screen and (max-width: 767px) {
.tp-bgimg.defaultimg {
  background-position: center center !important;
  background-size: 100% auto !important;
}
.x-slider-container .rev_slider_wrapper {
  background: #fff!important;
}
.x-slider-container.below {
  border: medium none !important;
}
.rev_slider .slotholder {
  max-height: 200px;
}
}

Note that it’s not a feasible solution and you might face extra spacing issue on top and bottom that you need to solve by setting a right slider height. Unfortunately we can’t assist you much because it’s unusual and you should use the default background-size cover for mobile.

For more information, kindly follow Revolution Slider Documentation

Hope this makes sense.

Cheers!

[Hugobosss]

Hi!

I think I have solved my problem. I experimented with the settings for my slider and removed “min. height (optional)” which was set to 300px. I also set the mobile layer grid size to Auto sizes from 1600x500px.
I tried to clean my Custom CSS for Theme X by removing the code one by one to see the result, as I was thinking that many things would be resolved now with later releases etc. Could you help me out here as I have now added all the code back but now some issues came back although the code is as before. I though it had something to do with cache but I have purged it.

This is the code I currently have which I got from you over the year.
My main issue with my site now is that I have white space between menu and slider, and the menu is overlapping the slider in mobile vertical mode (probably tablets as well?). It would be great to get help with this and maybe sort out this code I am using. Maybe the issues are even caused by some of the code? I have more codes on my site but I don’t think it’s related to the header/menu/slider issue.

/*Space above slider mobile*/
.masthead {
height: 205px;
}

/*Menu overlapping slider*/
header.masthead.masthead-stacked {
min-height: 241px;
}

/*white space */
.home #x-content-band-6 {
padding-bottom: 0 !important;
}
.home #x-content-band-8 p {
margin-bottom: 0;
font-size: 0;
}

/*white space*/
.page-id-7846 .h-custom-headline,
.page-id-7846 .h-custom-headline h5 {
margin: 0;
}

.page-id-7846 #x-content-band-2,
.page-id-7846 #x-content-band-1 {
padding-top: 0 !important;
}

/*Monitor navbar overlapping slider (space above slider)*/
@media only screen and (max-width: 979px) {
.x-navbar {
padding-bottom: 20px;
}
}

/*Mobile menu overlapping slider*/
@media only screen and (max-width: 767px) {
.x-slider-container.below {
margin-top: 48px;
}

/*Home empty space above slider */
header.masthead.masthead-stacked {
min-height: 205px;
}

Thankful for any help!

[Hugobosss]

I want to add that I am happy to change the way my slider is setup if this is causing issues on my site, but it’s too difficult to follow the documentation as there are so many settings and possibilities. I just want a slider with about 1500px500px and to shrink the slider to a mini slider on phone/tablet.

Thanks!

[Rad]

Hi there,

I understand you’re setting your masthead min height for mobile, but it’s effective for desktop view too. And that one creates the gap between slider and navbar. This only means that your CSS is not properly formatted hence @media also affect desktop which supposed to be for mobile only.

I can’t verify this since your CSS are minified.

Would you mind providing your admin login credentials in private reply?

Thanks!

[Hugobosss]

This reply has been marked as private.

[Joao]

Hi There,

I am not able to access your site it is giving me a maintenance mode massage,

In case you are not updating or working anything and the site keeps on maintenance mode, please follow this topic:

http://www.carriedils.com/quick-fix-briefly-unavailable-for-scheduled-maintenance/

Let us know when your site is ON again.

Thanks,

Joao

[Hugobosss]

Hi!

I did some updates yesterday, could you please try again?

Thanks!

[Rue Nel]

Hello There,

Please checkout this video tutorial to be able to created a fully auto responsive slider

[Hugobosss]

Hi!

Thanks, the video was very helpful. I have now created a carousel slider with size 800×533 and I have added a slide with a 800×533 image. I want to add a slide with a vertical image to the carousel, how would I go about doing this? I have tried different sizes and settings but it won’t work. In my slider I have 2x 800×533 images and one 267×400 image just as an example.
You can see the slide at http://www.hofverbergphotography.se and I have attached an image for my settings.

Another issue I have is with the mobile version, there is a gap between the menu icon and the slider. I have used different CSS codes which I got from you previosly and I think some of them are very similar and causing issues. Below is all the custom code I am using.

For example removing the first code will remove the gap on mobile but create a gap on desktop instead. It would be appreciated to sort this out. Thanks in advance!

/*Space above slider mobile!!
.masthead {
height: 205px;
} */

/*?????
.x-widgetbar-inner {
padding: 0;
}
*/

/*?????
.home .x-span12 {
margin-left: 4.92611%!important;
}
*/

/*?????
.collapse {
height: auto;
}
*/

/*?????
.x-widgetbar {
position: absolute;
top: 155px;
}
*/

/*?????
.logged-in .x-widgetbar {
top: 195px !important;
}
*/

/*?????
.x-widgetbar-inner .ppqtrans_language_chooser {
border: 0;
}
*/

/*?????
.x-widgetbar-inner .ppqtrans_language_chooser li {
border: 0;
float: left;
}
*/

/*?????
.x-widgetbar-inner .x-span12 {
position: relative;
left: 500px;
}
*/

/*Mobile navbar submenu always open*/
.x-navbar .x-nav > li > a {
}

/*Mobile navmenu closing ta bort!
.x-nav-collapse, .x-nav-collapse.collapse {
overflow: hidden;
max-height: 0px;
height: auto;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.x-nav-collapse, .x-nav-collapse.collapse.in {
max-height: none;
}
*/

/*Ta bort featured image i bloggen*/
.single-post .entry-featured{
display:none;
}

/*Footer background color*/
.x-colophon.bottom {
background-color:#212121;
}

/*white space ta bort!? */
.home #x-content-band-6 {
padding-bottom: 0 !important;
}
.home #x-content-band-8 p {
margin-bottom: 0;
font-size: 0;
}

/*white space ta bort!?*/
.page-id-7846 .h-custom-headline,
.page-id-7846 .h-custom-headline h5 {
margin: 0;
}

.page-id-7846 #x-content-band-2,
.page-id-7846 #x-content-band-1 {
padding-top: 0 !important;
}

/*Monitor navbar overlapping slider (space above slider)*/
@media only screen and (max-width: 979px) {
.x-navbar {
padding-bottom: 20px;
}
}

/*Mobile menu overlapping slider*/
@media only screen and (max-width: 767px) {
.x-slider-container.below {
margin-top: 48px;
}

/*Hem empty space above slider ta bort!?
header.masthead.masthead-stacked {
min-height: 205px;*/
}

/*Cards med vad jag gör – bakgrund*/
.my-card-special-number-1 .x-face-outer.back .x-face-inner {
background-image: url(‘http://www.hofverbergphotography.se/wp-content/uploads/2015/11/DSC01583.jpg’);
background-position: 50% 50%;
background-repeat: no-repeat;
}

.my-card-special-number-2 .x-face-outer.back .x-face-inner {
background-image: url(‘http://www.hofverbergphotography.se/wp-content/uploads/2015/11/bröllop2.jpg’);
background-position: 50% 50%;
background-repeat: no-repeat;
}

.my-card-special-number-3 .x-face-outer.back .x-face-inner {
background-image: url(‘http://www.hofverbergphotography.se/wp-content/uploads/2016/01/företagsporträtt-hem.jpg’);
background-position: 50% 50%;
background-repeat: no-repeat;
}

.my-card-special-number-4 .x-face-outer.back .x-face-inner {
background-image: url(‘http://www.hofverbergphotography.se/wp-content/uploads/2016/01/företagsporträtt-hem.jpg’);
background-position: 50% 50%;
background-repeat: no-repeat;
}

/*?????*/
@media (min-width: 960px) {
.x-main {
width: 80%;
}

/*Storlek på sidebar*/
.x-sidebar {
width: 20%;
max-width: 200px;
}

/*??????*/
a.x-img.x-img-link.x-img-none {
margin: 3px;
}

/*Gör portfolio featured image mindre*/
.single-x-portfolio .entry-featured {
width: 10%;
margin: 0 auto; /* center the image */
}

/*Menu overlapping slider ta bort!? Creates gap
header.masthead.masthead-stacked {
min-height: 241px;
*/
}

[Paul R]

Hi,

To remove the gap in mobile, you can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 767px) {
.x-slider-container.below {
    margin-top: 0 !important;
}
}

Hope that helps

[Author]

Posts