Hi again Jordan,

Here are my CSS code snippets:

in Enfold general styling (I just changed the section ID):
@media only screen and (max-width: 767px){
#social-media-mobile .flex_column.av_one_third.flex_column_div{
width:33.3%!important;
}
}

in my custom styles.css file:
/* alternate social media icons display for mobile devices */
@media screen and (max-width: 767px) {
#social-media-desktop { display: none !important; }
#social-media-mobile { display: block !important;}
}
@media screen and (min-width: 767px) {
#social-media-desktop { display: block !important; }
#social-media-mobile { display: none !important; }
}

However, nothing works in terms of hiding one section one desktop nor on mobile.

Please tell me what I did wrong in trying to replicate the sections and trying to hide one and the other.

Thanks.
Lyse

Hi Jordan,

It does produce the results I want for the mobile, but for the desktop it will not work. So I may have to create two separate sections per page where I use social media, with their own IDs to have these display correctly on both desktop and mobile.

My pages most particularly my home page sure has a lot of duplicated sections and all of their content updated every time. I really thought the theme was responsive and that this sort of customization would not be necessary.

Thanks
Lyse

I don’t mind if the solution is to have no slide in text in the header on mobile only.

Also by testing on screenfly I can see this is also a problem in desktop and tablet at 1024 x 768 and under

Thanks

Jenny

Sorry for my late reply – I’ve been on vacation! The problem, unfortunately, still persists.

Looks like Kriesi is aware: https://kriesi.at/support/topic/editor-element-live-preview/

Could you please confirm as I currently cannot build out a site. Also, do you have any sort of time frame on the new release?

Thank you!

Hi Basilis,
The video is .mp4 youtube compressed video. To get a format for testing we uploaded the video to youtube then downloaded their converted video file to upload to our server. So what’s hosted on our server is the same as what’s being served from youtube in the other video presentation tests on the page.

Again what is being used in the background video in the top presentation is identical to what is being used in the second presentation. The only difference is the video is served in your enfold video player element–which works fine. It’s a real mystery as to why the background video is breaking an only serving the loading gif.

As a side note, we have been provided by enfold support custom css to modify the background video in the fullscreen element but upon reviewing it I don’t see anything that would prevent the color section or fullscreen element from autoplaying a self hosted video. That said I’m not a web developer so I’m not 100% sure. Are you seeing anything there that may affect the bg video from playing?

Thanks!
Eric

Hi Rikard,

I’m confused. Is this CSS for the Mobile/Responsive version of the page? Because the Desktop version looks perfect as is. I removed the CSS that was prohibiting the Logo from being displayed on mobile.

So, now it look like this:

I think there are 3 options here:
1- add the CSS code I had the removes the logo from displaying
2- Making the logo smaller and the search box smaller too?
3- Making sure the Search Box displays below the Logo and the Hamburger Menu (I think this would be the nicest one and many people would love to have this)

For #3. we would need to adjust this CSS, correct?

@media only screen and (max-width: 767px) {
#header .widget {
left: 40%;
padding-top: 1.5em;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 1;
width:45%;
max-width: 55%;
}}

Thank you so much for your kind help!!

Warmly,

Havi
PS: I just referred you two more Enfold licenses. ;) Love Enfold!!!

And also – since I have found my way to the support forum. How do I reduce the size of the top picture, so I don´t cut the top of the logo? :-)

Thank you!

Ismael,
Thank you for the assistance.
I am confused by the transparent menu issue. On some browsers / computers, the menu become opaque as expected when scrolling – but on others it remains transparent. The current setting for https://www.partnersforcare.org/home2/ is “Transparent header with border”.

I have deleted all cached files on my laptop, but still the menu remains transparent after scrolling. Same behavior in Chrome, Firefox and IE 11 on my laptop, whereas if works fine in Chrome on my iMac at home.

Any suggestions would be greatly appreciated.
David