Allslider problem in Dreamy theme after upgrade to WordPress 4.4

[Daphne Christoforidou]

I just updated my site http://www.hotelasterias.gr to WordPress 4.4 and the images in homepage Allslider do not display 100% width. Also the header images in all pages were not full width and aligned left but I managed to fix that with a css fix.

I have latest version of Dreamy theme and all plugins are updated. Could it be that latest WordPress version changes regarding responsive images are messing with the slider images? I tried several css fixed but none worked. Could you please take a look?

Also the header in responsive design, when I check the site from mobile (iphone) is broken: first the header appears in black background and the slider starts below the header..

[Daphne Christoforidou]

I managed to fix the Allslider width problem by using this on my custom css :

.cycle_element { background-size: 100% 100% !important; }

I still have major issues with the header on mobiles. I checked my site and Dreamy demo and the demo displays fine on mobile. I found out that my site uses a custom css from folder dreamy/7league/ that the demo doesn’t. Specifically this line on the file http://hotelasterias.gr/wp-content/themes/dreamy/7league/css/customcss.php?ver=00862e77b304400dfcb80e5a7c883e39

overwrites the position:absolute property of the headline class and messes up my header

@media only screen and (max-width: 979px)
#headline, #headline_bg {
position: relative !important;
}

Please, any ideas why that happens on my implementation and not yours? I really need to solve this. I checked the theme settings in case i had to switch a setting on or off but found nothing.

[7Theme Support]

Hi, we’ve tested it on your website, and on our end all is working. What screensize do you use? And was operating system? And browser?

[Daphne Christoforidou]

If you check from a mobile device my site, http://www.hotelasterias.gr, only the first slider appears ok, the rest are huge.

[7Theme Support]

Ok, found the problem. The gallery plugin you use change the css code from the slideshow. You can try this, I think it could solve the problem: open the file style.css in the root of the theme and add the following code at the end of the file:

@media only screen and (max-device-width: 480px)
.cycle_element {
max-height: 100% !important;
}

[Daphne Christoforidou]

tried it but I don’t see any change..

here’s the custom css code I used for both my problems :

/* fix for header images not full width in pages */
#image_header img { width:100%; }
/* fix for allslider width of images in desktop */
.cycle_element { background-size: 100% 100% !important; }
/* fix for allslider images in mobile – not working */
@media only screen and (max-device-width: 480px) {
.cycle_element { background-size: cover !important; max-height: 100% !important; }
}
/* fix for header in mobile */
body.has_slider #headline { position:absolute !important; }

[7Theme Support]

Hi,

what part of the code you insert doesnt work? All?

[Daphne Christoforidou]

No I mean your last css code :

max-height: 100% important;

does not seem to work. The height of the images remains huge for a mobile device.

The rest that I inserted myself works.

[7Theme Support]

Hm, ok, then we have to test the code again, but I’m sure we will find a solution. As soon we found a working solution we post it here

[Author]

Posts