Bingo Josue, top thinking!
Problem solved :-)

Thanks so much for your good support!
B.

I think i fixed it. i went into the sftp, went to the enfold theme (not child theme) and changed the grid css boxed #top from 1010px to 100% . works now

Hi Vinay,

.custom-height {
   min-height:360px!important;
}

I used this slightly different version:

.custom-height img {
   height:360px!important;
}

…and was able to cause the image to disproportionately expand, which is OK for the time being, though ideally the image would retain its original proportions and the extra on the left and the right would just bleed off the edge of the screen. You can see the latest version by clicking the first link below and comparing the differences in background image proportions on desktop vs mobile (portrait).

Without including the IMG, the fullwidth slider height does expand, but the image doesn’t fill that space—it’s just whitespace, as I demonstrated in the previous reply (and the screenshot attached to that previous reply showing that, since the image is 16:9 but a mobile browser in portrait mode is closer to 9:16, the image takes the width of the browser window as its own width and therefore renders a proportional height that’s too small to cover much height in the window, so while adding the min-height gives the slider area more space, it doesn’t expand the image into that space. Targeting the image with IMG on the other hand, does expand the image, but stretches the image and breaks the original proportion.)

An ideal solution would take the focus area of a fullwidth slider image (as chosen by dropdown, e.g., center center or top left, etc.) and use that area of the image as the background image of the slider for browsers in portrait mode. I’ve attached a graphic (second link below) showing what our current solution accomplishes vs what an ideal solution would accomplish.

Perhaps suggest this to the dev team for consideration in future updates of the theme?

Thanks again for your continued assistance!

Hi,

I cleared cache the first time I noticed this problem and more than that 2 days ago I reinstalled everything in my laptop and issue is still there. Not sure why.

Thanks,
Adina

Hi Emanuel.

I’ve just realised that several other pages are no mobile-friendly and cannot figure out a clear reason why. I’ve set the robots.txt file as recommended by one Moderator, in order o block the bots from indexing private content:

User-agent: *
Disallow: /wp-admin/
Disallow: /wp-includes/
Disallow: /cgi-bin/
Disallow: /wp-content/plugins/
Disallow: /wp-content/cache/
Disallow: /wp-content/themes/
Disallow: /*?*
Disallow: /*?

The strange thing is that when you first tested some pages and told me they were mobile-friendly (you were right, btw), I still had the very robots.txt configuration, so it doesn’t make any sense whatsoever. Then I though it could be caused by the image sliders or the rotating titles, but now I see that some pages with these two feautres are not reported as mobile-unfrienly. Moreover, I’ve red the Google Webmaster guidelines various times but nothing seems to work.

I’ve also improved the page speed significantly lately, on the mobile version is at 70 right now, and desktop is 88. I’ve done throught the implementation of AUTOPTIMIZE, WP FASTEST CACHE, WP SMASH and WP OPTIMIZE. They all are proved to work well together.

Can you please advise me on this?

Best,

hacart

Hi Vinay,

That seems to get close, but doesn’t quite solve the issue. I’ve included a link to a screenshot of the page on mobile after the suggested changes have been implemented. You’ll see that the min-height has added height to the fullwidth slider area, but the background image hasn’t filled that area. (Compare the screenshot to the second link showing the page on desktop.)

I would think a lot of people would use fullwidth sliders in a similar way and therefore would encounter this same problem, so finding a solution might be really appreciated by hundreds or thousands of Enfold users.

Thanks in advance for your continued help!

So what I gather from your reply, is that it is not possible to align a video to top. Is that correct?

Your suggested solution is basically the same as the previous suggestion above. It does not align to top, but adjusts up and down based on a center align (vertically speaking). The problem with that is it displays differently on different devices and for example on phones there is blank space above the video.

Thanks for your assistance.

I worked on #1 above some more and found the below code on the forum, which has helped but has not solved the issue with the secondary menu at the very top (where the social icons are):
/*transparent header*/
.header_color .header_bg{background-color: rgba(255,255,255,0.9);}
#top .av_header_glassy.av_header_transparency #header_main {
background-color: rgba(255,255,255,0.7);
}

Link to staging site included in private content area pasted below so you can see the results of what I’ve done so far.

As for #2, I don’t know where to begin so will definitely need help on that.

Have a good weekend and thanks again!