-
Posts
-
Hi
Getting ready to launch for Monday, so cleaning up display issues.
In this thread here: https://kriesi.at/support/topic/section-titles/ the solution worked very well, however, on an iPhone, I don’t see the small arrow that points down to the next section. How can I get this arrow to display on iPhones for section titles (even though it does not link anywhere)?
Thanks
LyseHi
Forgot to give me you my website link: crescendo.staging.wpengine.com
My section titles custom ID CSS code is:
#av_section_titles {
background-color: #4c4d4f!important;
border-top: 10px solid #ec5548!important;
height: 115px!important;
color: #ffffff!important;
margin-top:20px;
margin-bottom:20px;
}Lyse
Hi!
You would need media queries to make it work as your request
Cheers!
BasilisHi Basiis,
You mean something like this (keeping same CSS code?):
@media screen and (max-width: 989px) {
#av_section_titles {
background-color: #4c4d4f!important;
border-top: 10px solid #ec5548!important;
height: 115px!important;
color: #ffffff!important;
margin-top:20px;
margin-bottom:20px;
}
}Thanks for the quick response!
LyseHi Basilis,
I see that on the iphone there is one section that does display the down arrow, but incorrectly. That section is VOTRE PARTENAIRE. Is is the fact that the title is longer than the others?
Any help in making this work would help.
Thanks
LyseHi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 480px) { .avia_transform .av-extra-border-element.border-extra-arrow-down .av-extra-border-inner { top: -20px; } }Best regards,
YigitHi Yigit,
I tried the CSS code snippet, but added the section IDs as it is a global change I want to apply for three pages. Here’s what I added
@media only screen and (max-width: 480px) {
#av_section_titles .avia_transform .av-extra-border-element.border-extra-arrow-down .av-extra-border-inner { top: -20px; }
}
@media only screen and (max-width: 480px) {
#av_section_titles-first .avia_transform .av-extra-border-element.border-extra-arrow-down .av-extra-border-inner { top: -20px; }
}I’m sorry but the code does not work
Thanks
LyseHi,
Try inserting this css code in the media query (max-width:480px):
#av_section_titles { min-height: 140px; }Hope this helps.
Best regards,
NikkoHi Nikko,
I see a down arrow for section titles that wrap into two lines but with a large gap between the arrow and the title container.
However,
on this page: https://www.impactcrescendo.com/releve/ which has single line title, it displays perfectly
on this page: https://www.impactcrescendo.com/coaching/ there is also a single line title but it does not display a down arrow
on the home page: https://www.impactcrescendo.com/accueil/ none of the single line titles display correctly.I think we are getting closer to a solution….
Thanks
LyseHi Lyse,
Seems like there’s caching issue on your site, which prevents css changes to be shown, also the code I gave you please remove it and replace it with this:
@media only screen and (max-width: 480px) { #av_section_titles { height: auto !important; } }Hope this helps.
Best regards,
NikkoHi Nikko,
I purged my server cache and purged all cache. I replaced the CSS code but no change on my iphone. So I modified the background color of the sections, saw the change immediately and noticed the down arrow worked. So I put back my original color and once the cache cleared again, all section titles word perfectly!
Thank you so much for all of your time and patience.
Have a great day!
Lyse
- You must be logged in to reply to this topic.