-
Posts
-
Hello,
On my phone (samsung S6 Edge+) I see the header disappearing under the photo. When I resize the computer to mobile phone mode it’s fine. How can I adjust this so that it also looks correct on the phone. Send image: https://imgur.com/a/vMpd6HL
Regards Tom
Hey tomcusters,
Thanks for the link to your site and the screenshot, please take a look at your second color section options, for mobile it has parallax activated and this is why the “Strand” text is not overlaying the top image, for desktop parallax is not activated.
I’m not sure why the parallax is activated, as I don’t see a background image there, but you can compare it to the settings of the second color second on the “Omgeving” page as it doesn’t have this issue.
This css should correct the issue:@media only screen and (max-width: 1024px) { #av_section_2.av-parallax-section { overflow: visible; } #av_section_1 .av-section-color-overlay { opacity: 0; } }After applying the css, please clear your browser cache and check.
Best regards,
MikeHello, thank you for your answer. After several readings I understood what you meant. However, all the settings on the pages are exactly the same in the first color section, where the background image is located. Everything is set to scroll (and not parallax). Why does it look good at “restaurants” and not at the rest? I made another site (www.maastrichtvooriedereen.nl) with the same template and everything works properly there. I will send you the login details, you can take a closer look.
Ps, you’re talking about “take a look at your second color section options”. What do you mean. Is that the section where the text is? I can’t choose parallax or anything else here.
Thanks in advance and greetings Tom
Hi,
Thanks for the login, but please upgrade it to admin, we can’t view your backend.Best regards,
MikeHi,
Thanks for the login, I don’t see a cause for this, but I see that you are using v5.0, please try updating to v5.1.1.
Otherwise, this css does correct:@media only screen and (max-width: 1024px) { #av_section_2.av-parallax-section { overflow: visible; } #av_section_1 .av-section-color-overlay { opacity: 0; } }Best regards,
MikeThanks for your answer, I’ve already updated to 5.11, no effect.
Still strange that the pages under the button “omgeving” work and the rest do not. I don’t think that’s possible. I’ve used the template several times, never any problems.I already have the following css in use (Quick CSS):
@media only screen and (max-width: 1000px) {
nav.main_menu, #menu-item-search {
display: block !important;
}
.menu-item {
display: none;
}
.av-burger-menu-main.menu-item-avia-special {
display: block;
}
}
Where should the css you send me be placed, in between or below?-
This reply was modified 1 year, 8 months ago by
.
-
This reply was modified 1 year, 8 months ago by
-
This reply was modified 1 year, 8 months ago by
-
This reply was modified 1 year, 8 months ago by
-
This reply was modified 1 year, 8 months ago by
-
This reply was modified 1 year, 8 months ago by
-
This reply was modified 1 year, 8 months ago by
-
This reply was modified 1 year, 8 months ago by
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.
Hi,
Great, I’m glad that you found a solution, and thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it
Best regards,
RikardHello 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.Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:@media only screen and (max-width: 1366px) { #av_section_2.av-parallax-section { overflow: visible; } }Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
This is the expected results:
Please note that iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.
Best regards,
MikeThanks 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!!Hi,
Glad this helped, the parallax allows the image to also move as the foreground moves, scroll doesn’t. The height of the parallax image doesn’t really alow you to see the effect very well, it works better when the image is bigger.
The media query max-width is pixel width of the screen size.
For the masonry headings this is the css, adjust to suit:#top #main .av-caption-style-overlay .av-masonry-entry .av-masonry-entry-title { font-size: 1.5em; }Best regards,
MikeThanks 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?Hi,
The css in my last post is only for the font size, the other css should also remain as it is not the same as the first post.
The max-width of 1024 tells the css to not work above 1024px, so it doesn’t apply for the headings since you do want it to work for 1024px and above.
Did you try this and adjust the font size to suit your needs, is it working for you?Best regards,
MikeI 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?
Hi,
Thanks for the feedback, I don’t recall this solution specifically from nine months ago, I guess at the time I thought this was the correct solution, and in my recent test I felt 1366px was better. If the second part of the css was active when I tested the second time I wouldn’t see that it was needed, try removing both and test one at a time to see which you prefer.Best regards,
MikeEverything 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 -
This reply was modified 1 year, 8 months ago by
- You must be logged in to reply to this topic.