Slider overwrites page text on refresh

Dazzling
1

Hi Aigars

I have a problem using Google Chrome with your template (which also occurs with justechbr’s site http://justechbr.com related to this thread

The site I’m developing is http://natasha-sikand.com/wpdev/

The issue is with the slider which renders over the page text on return to the page from another page or on F5 refresh
Adding the fix above from the thread I mentioned as follows

.flexslider {
overflow: hidden;
}

at least makes the page less messy – however the slider doesn’t appear until the next slider cycle.

I’ve searched for solutions and tried many different things to no avail!

I also noticed that this isn’t an issue on your Demo site!

Please can you help

Thanks Jai

2

Hi Jai,

I hope you are well today and thank you for your question.

To resolve the issue could you please try adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Apperance -> Theme Options -> Other -> Custom CSS


div.flexslider {
  min-height: 329px;
}

If the above solution doesn’t work then try using the following CSS code.


div.flexslider {
  height: 329px !important;
}

Best Regards,
Movin

3

Awesome - spot on - thanks so much.

The first example works perfectly :smiley: :smiley: :smiley:

4

Dam - one small issue - The image is not that size on a mobile device, so it leaves too much space on small devices now…

Some kind of responsive override required?

Thanks

5

Hi Jai,

You are most welcome here :slight_smile:

To make it responsive try using the following CSS code removing the previously added CSS code.

@media only screen and (max-width: 450px) {
div.flexslider {
  min-height: 160px;
}
}

@media only screen and (max-width: 520px) and (min-width: 451px) {
div.flexslider {
  min-height: 185px;
}
}

@media only screen and (max-width: 620px) and (min-width: 521px) {
div.flexslider {
  min-height: 221px;
}
}

@media only screen and (max-width: 730px) and (min-width: 621px) {
div.flexslider {
  min-height: 260px;
}
}

@media only screen and (max-width: 860px) and (min-width: 731px)  {
div.flexslider {
  min-height: 309px;
}
}

@media only screen and (min-width: 860px) {
div.flexslider {
  min-height: 329px;
}
}

Cheers,
Movin

6

Awesome - all good now

Cheers, James

7

Have a fantastic day!