i guess it has something to do with: anti-aliasing of safari font rendering
try this here first as a global rule

html {  
    -webkit-font-smoothing: antialiased;
}

but on this adivise from: https://blakepetersen.io/how-to-clean-up-chrome-and-safaris-webfont-rendering/

Use Wisely
For these last two hacks, each character re-rendered will require extra resources so it’s best NOT to use these to render large swaths of copy. Use these on headers and global elements where you will have the most impact, but for the main copy use ‘serif’ or ‘sans-serif’ and let the browser decide.

try perhaps only:

.av-main-nav > li > a {
    -webkit-font-smoothing: antialiased;
}

by the way i see you use a different font for this – do you have all web-font files uploaded?

• This reply was modified 8 years, 11 months ago by Guenni007.

try this here – maybe it works for you (in child-theme functions.php)

function only_one_toggle_open_at_the_same_time(){
?>
<script>
(function($){
    $(window).load(function() {
    	$('.toggler').on('click', function(){
  		$('.toggler').not(this).next().removeClass('active_tc');
	});
    	$('.toggler').on('click', function(){
                $('.toggler').not(this).removeClass('activeTitle');	
	});
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'only_one_toggle_open_at_the_same_time');

by the way : the laurels go to Josue
see also here: https://kriesi.at/support/topic/single-toggles-besides-sibblings-each-other/

• This reply was modified 8 years, 11 months ago by Guenni007.

is your header a shrinking one or not ?
is it fixed on top ?

The thing i understand from your request is that you don’t want to crop the images on top.
The responsive behaviour is a different thing – but you see on screenshot here: https://kriesi.at/support/topic/is-there-any-way-to-make-the-background-image-in-a-color-section-responsive/#post-712654 that it will work on real mobile browsers too and even the font goes to the responsiveness.

On what mobilephone your are testing these pages – tell me your Browser and or IOS version please.

you can see here : http://webers-testseite.de/kaetz/leistungen/#av_section_6
ist this what you want? it is positioned center top even if you are turning your mobile to landscape the hat of that young lady isn’t cropped.
no mobile simulated – i can see it on my iphone 4s ( a bit older) and on my ipad4 that all is working in that manner you prefer.

Do you can see it too on my testpages that it works? ( i only have here mac equipement – so i could not test it in other variants.)

and once again: if you have a non shrinking header – you know your header hight ! from Enfold Dialog
if you choose small i guess it is 50px – for big …. look yourself. this comes to scroll-offset on main!

so if you have a color section with fixed positioning add a custom class – maybe topfixed or something like this:

.responsive #top .avia-section.topfixed {
    background-position: center 50px !important;
}

or left or right. etc. the 50px (look to the bride theme) on css you find the background-position : center top but without regarding the header hight.

on responsive case the sticky header is lost – and scrolls away – so background position has to get the top (0px value) !!!

@media only screen and (max-width: 768px) {
.responsive #top .avia-section.topfixed {
    background-position: center 0 !important;
}
}

• This reply was modified 8 years, 11 months ago by Guenni007.

but this is not a matter of responsiveness it is a trouble with fixed positioning. And that seems to be a global Problem of all Mobile Browsers.

https://coderwall.com/p/kivwgg/position-fixed-on-mobile

maybe there are some javascript solutions http://bradfrost.com/blog/mobile/fixed-position/#js-solutions but definitly there is no one and only good fix of that.

• This reply was modified 8 years, 11 months ago by Guenni007.

please go and look again.
I tested something for you .
it seems to work on my old iphone 4s – so i could not believe that it won’t work on actual mobile phones

well if you look here http://webers-testseite.de/ikom/circles/
on top there is a responsive background-image in a color section. !

The thing is how to set up that color-section.
Choose “no minimum height and on tab 2 choose “scale to fit”. (this is not so important because image-background size will be calculated later – but you will have to know the class for the color section)

Than you have to know the aspect-ratio of your background image !

f.e. your background image has a 4:1 ratio. (1200px : 300px)
on quick css i than set up the height from the color-section by:

.page-id-2981 .avia-full-contain {
    background-size: 100vw auto;
    height: calc(25vw);
}

that is the trick ! the css width is set to 100vw and height to auto
the height of the container is in dependency to image aspect ratio. !

but never the less you will than have to think about the content in it ( f.e. h2 headings on my example)
and than we are again on media querries to adapt it to shrinking color sections

yes that is what i said

well you got different original sizes of your images
the height is 430px but i see 1200, 1440 and 1500 px width.

but i try to help you without image resize

well you got different original sizes of your images
the height is 430px but i see 1200, 1440 and 1500 px width.

and you are using the grid portfolio layout. So there is a grid with fixed dimensions.
try the Masonry – you can choose portfolio entry as well and than take under size settings the perfect grid option.
If you put the masonry not in a container it is 100% screenwidth too!

• This reply was modified 8 years, 11 months ago by Guenni007.

and you see that there is no alignment now because icons are different width – give the container a fix width:

#av_gmap_1 .av_font_icon {
    color: #9c27b0 !important;
    opacity: 1 !important;
    width: 36px !important;
}

thats it

yes i understand that but otherwise you have to wait til a mod is on your thread:

i don’t understand how you create this bubble info – because there are some color style informations on each and an opacity set.
you can change it all by :

#av_gmap_1 .av_font_icon {
    color: #900 !important;
    opacity: 1 !important;
}

but i guess it is the opacity info which you want to get rid off – so only change that part of code

if you want a specific color for each tell us.

• This reply was modified 8 years, 12 months ago by Guenni007.

zwei deutsche die sich englisch unterhalten :lol:

– ja das hatte ich ja ganz am Anfang für dich auch so gesetzt. Dann dachte ich das Pumpen wäre besser – in Kombination sieht es gut aus und ist in der Größe auch nicht so aufdringlich.

Wäre das nicht auch ne gute idee für dich. Auf der Testseite habe ich das Hamburger Menu für die gesamte Seite – also auch auf Mobile gesetzt und ich überdecke nicht die ganze Seite mit dem Menu sondern nur einen Teil (wobei man natürlich die Wahl hat wie das abgedeckt wird (dunkel – hell oder farbig etc. ):

http://webers-testseite.de/elegant

PPS: Mein Hoster hat momentan Probleme, deshalb könnten manche Seiten von mir momentan nicht erreichbar sein.

PPPS: :wink: du darfst mir aber gerne mal einen Tip geben worauf ich beim Umsteigen auf https achten muss. !Danke
E-Mail siehst du ja bei anklicken meines Avatares.

• This reply was modified 8 years, 12 months ago by Guenni007.

see here:

http://lea.verou.me/2012/12/animations-with-one-keyframe/

my code for the example page:

@keyframes pound {
	from, to { transform: none; }
	50% { transform: scale(1.4); }
}

.heart::before {
    content: "\e806 ";
    font-family: entypo-fontello;
    font-size: 14px;
    position: relative;
    top: 2px;
    animation: pound .7s infinite alternate;
    display: inline-block
    }

by the way on css you have to substitue the u in ue806 with that backslash – you find it by alt+shift+7