- This topic has 2 replies, 2 voices, and was last updated 4 years, 2 months ago by
.
-
Posts
-
I have created a beautiful header element that looks great on desktop.
Some background: My site design is a bit complicated as it is for real estate and am using an IDX widget in the header and a Revolution Slider slider on the home page that’s embedded in the GP Header element.
Due to z-index issues, I needed to include the widget in the GP Premium header, vs in Revolution slider, and direct the rev slider to reduce the size of the full-screen image by the IDX widget container.
Works great on desktops! Trouble is this is not a good solution for the mobile experience. The widget winds up being much too big on mobile. Hence, My Goal is to display a different GP page header on mobile and the existing one on desktop.
Can you point me in the right direction for fixing this page header which just displays on home page (done with display rules). Can I/Do I create two page headers, each with some css classes that have been applied the page header and then add custom css @media queries to show each header at appropriate screen widths?
Also note, just hiding the widget in my original element, doesn’t work since rev slider is still reducing by the anticipated size of the IDX widget container.
Note site is behind a coming soon page. Cannot make it live.
Well I figured it out. Best solution was to create only one element, but add some divs with css in the main one with show hide stuff and got it to work.
Customer Support
Glad you were able to figure out!
- You must be logged in to reply to this topic.