[AviatrixParticipant]

#11880

Hello, I hope things are going well. I’m working on my site and I’m having a few issues working to get the site mobile friendly.

When I looked at your theme demos on mobile view; the circle flips have the text that is in the circle at full desktop view listed beneath them. How can I set that up on my site? http://www.aviatrixmind.com/

Right now, it is just displaying the image.

The other mobile/responsiveness issue I was hoping you could advise me on is how to resolve how much space the sticky nav takes up on the screen on mobile devices? It takes up half the screen and I’d like to reduce that by half.

If you explore the site; I know I need to learn to make the slider revolution responsive as well, but thats another story.

Any advice or help you could give would be appreciated.
Thank you!

[Mohamed NabilModerator]

#11882

Hello Aviatrix,

I checked your site, I see you are using Circleflip V2.4, while the latest version is 3.6. If you update the theme I believe it will be fixed. But if you want to stay on the old version, you can just add these lines in your theme options Custom Css Section

@media (max-width: 767px)
.circleBackImage, .circleAnimationDetails.back {
    display: block;
}

Regarding the header height, I see this code is applied:

header.activeSticky .stickyHeader.mainHeader .logoWrapper {
    height: 105px !important;
}

I think you have added it in the custom CSS section. If not you can add it, and change the 105px value to 40px or whatever value that fits your need.

Hope this helps!
Thanks

[AviatrixParticipant]

#11885

This reply has been marked as private.

[AviatrixParticipant]

#11886

Also, do you have any advice on preventing the background images in the columns of a page from scaling down to the point where they are blurry on mobile?

An example of this would be here, on a mobile device. Thanks! http://www.aviatrixmind.com/subcribe/

[Mohamed NabilModerator]

#11888

Hi Aviatrix,

Kindly check the CSS now. You had some syntax mistakes that I’ve fixed.

Regarding the subscribe section I fixed it with these lines

.page-id-400 .parallaxSection {
background-size: auto !important;
}

Thanks