Header disappears under the photo on the mobile phone

Addition to previous post.

I think I’ll have to rebuild all the pages just like the ones that do work. I already did it in “tarieven” and it is now good. If everything else goes well, the problem is solved, otherwise I’ll report back.

I have now redesigned all pages and everything works as it should again.

• This reply was modified 2 years, 2 months ago by tomcusters.

Hello again,

Following on from my previous question.

Can you adjust the font size of the headings (such as swimming pool, living room, etc.) in the pictures at the bottom of the page (masonry) see https://lacasatorre.nl/inrichting/

If you then click on a picture (at the bottom of the page), for example swimming pool (https://lacasatorre.nl/portfolio-item/zwembad/ ), and you view this on an iPad or telephone, the block with text and photos will disappear under the header with photo, see: https://imgur.com/a/mtjCwmN !
This is NOT the case on the regular computer.

I’ve tried everything, but can’t find where to change this.
If the photo in the header is higher then it goes well, if the photo is smaller it disappears.

• This reply was modified 1 year, 6 months ago by tomcusters.
• This reply was modified 1 year, 6 months ago by tomcusters.

Thanks for your answer.
By setting it to parallax and the extra css it now works. The lower height header (https://lacasatorre.nl/portfolio-item/zwembad/) has the parallax setting, the higher height header (https://lacasatorre.nl/inrichting/) has the scroll setting.

• Question, what exactly is the difference between parallax and scroll?
• And can you explain to me what the max-width in the css means, what is the meaning of the number of pixels.

Another question I asked, but maybe I should create a new ticket for that?
Can you adjust the font size of the headings (such as swimming pool, living room, etc.) in the pictures at the bottom of the page (masonry) see https://lacasatorre.nl/inrichting/. Intended for the iPad!!

• This reply was modified 1 year, 6 months ago by tomcusters.
• This reply was modified 1 year, 6 months ago by tomcusters.
• This reply was modified 1 year, 6 months ago by tomcusters.
• This reply was modified 1 year, 6 months ago by tomcusters.

Thanks so far.

In the first answer to my question in this support (see above) you used the same css but with the addition:

#av_section_1 .av-section-color-overlay {
opacity: 0;

And you use a max-width of 1024

This is no longer necessary?
What is the effect of that?

I think you misunderstood me.
I meant the css in your earlier letter of August 28, 2022.
————————–
This looked like this in its entirety:
@media only screen and (max-width: 1024px) {
#av_section_2.av-parallax-section {
overflow: visible;
}
#av_section_1 .av-section-color-overlay {
opacity: 0;
}
}
————————–
What does the (extra) css mean?
#av_section_1 .av-section-color-overlay {
opacity: 0;

And why is max width 1024 and not 1366

What do you mean by: Did you try this and adjust the font size to suit your needs, is it working for you?

Everything works fine, just wondering.

Finally what means, or what does this css do:
#av_section_1 .av-section-color-overlay {
opacity: 0;

Thanks so far.
Regards Tom