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 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 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 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 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 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

hm i got this issue the first time of many installs now to.
I defintly found the grid.css line but in former times this container rule is overwritten by enfold options dialog ! entry.
I got now one installation where the grid.css rule seem to work like an important rule ??? what could it be.

i can see the entries in my enfold-child.css at the bottom of it :

    .container {
        width: 100%;
    }
    .container .av-content-small.units {
        width: 70%;
    }
    .responsive .boxed#top,
    .responsive.html_boxed.html_header_sticky #header,
    .responsive.html_boxed.html_header_transparency #header {
        width: 1510px;
        max-width: 90%;
    }
    .responsive .container {
        max-width: 1510px;
    }
    #top #wrap_all .all_colors h1,
    #top #wrap_all .all_colors h2,
    #top #wrap_all .all_colors h3,
    #top #wrap_all .all_colors h4,
    #top #wrap_all .all_colors h5,
    #top #wrap_all .all_colors h6 {
        color: #425719;
        font-weight: normal;
    }

but it has no influence on it.

Edit: :lol a noob error. i didn’t close a media querrie rule at the end ! :yoo the missing second closing brace

• This reply was modified 8 years ago by Guenni007.

btw. i do not allways install wp-supercache. Sometimes it is a more and bigger benefit to have a good htaccess file on wordpress installation.

If your server supports gzip and or mod_deflate i have often

( don’t forget to include the original entries in your existing htaccess file – something like this:)

`# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress`

here is a standard htaccess file i often use (even to get better results on those testing pages :lol: )

in addition to your existing entries !!! :

# Deny from
<files wp-config.php>
order allow,deny
deny from all
</files>

 
# Directory Browsing
Options All -Indexes

# Keep-Alive
<ifModule mod_headers.c>
   Header set Connection keep-alive
</ifModule>
 
# Gzip
<IfModule mod_mime.c>
    AddType application/javascript          js
    AddType application/vnd.ms-fontobject   eot
    AddType application/x-font-ttf          ttf ttc
    AddType font/opentype                   otf
    AddType application/x-font-woff         woff
    AddType application/x-woff              woff
    AddType image/svg+xml                   svg svgz 
    AddEncoding gzip                        svgz
</Ifmodule>
 
# GZip Kompression
<IfModule mod_gzip.c>
 mod_gzip_on       Yes
 mod_gzip_dechunk  Yes
 mod_gzip_item_include file      \.(html?|txt|css|js|svg|php|pl)$
 mod_gzip_item_include handler   ^cgi-script$
 mod_gzip_item_include mime      ^text/.*
 mod_gzip_item_include mime      ^application/x-javascript.*
 mod_gzip_item_exclude mime      ^image/.*
 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

 
# Browsercache
<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresDefault "access plus 1 month"
 ExpiresByType text/css "access plus 1 month"
 ExpiresByType text/javascript "access plus 1 month"
 ExpiresByType text/html "access plus 1 month"
 ExpiresByType application/javascript "access plus 1 month"
 ExpiresByType application/x-javascript "access plus 1 month"
 ExpiresByType application/x-font-ttf "access plus 1 month"
 ExpiresByType application/x-font-woff "access plus 1 month"
 ExpiresByType application/x-woff "access plus 1 month"
 ExpiresByType application/xhtml-xml "access plus 600 seconds"
 ExpiresByType image/gif "access plus 1 month"
 ExpiresByType image/jpeg "access plus 1 month"
 ExpiresByType image/svg+xml "access plus 1 year"
 ExpiresByType image/svg "access plus 1 year“
 ExpiresByType image/png "access plus 1 month"
 ExpiresByType image/x-icon "access plus 1 month"
</IfModule>

 
# Deflate by FileType
<IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE text/javascript
 AddOutputFilterByType DEFLATE image/svg+xml
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/atom_xml
 AddOutputFilterByType DEFLATE application/x-woff
 AddOutputFilterByType DEFLATE application/x-font-ttf
 AddOutputFilterByType DEFLATE application/x-font-woff
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript
 AddOutputFilterByType DEFLATE application/x-shockwave-flash
</IfModule>
 
# ETag
Header unset ETag
FileETag None

<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

btw. proof your images.
You got wonderful images but on internet sometimes it is better to have small sizes of images.
on three images i can obtain big loss of space but with less loss of quality and use please with a higher compression level and progressiv instead of optimized
Chairs-around-outdoor-burning-fire-pit–1500×999.jpg : 173kb versus 500kb
Los-Altos-Hills-Guesthouse-Main-House-Pool-Firepit-at-Dusk-1500×991.jpg : 152kb. versus. 434kb
Modern-patio-next-to-swimming-pool-1500×999.jpg : 198kb. versus. 529kb

see here : only in the sky you see a bit more jpg artefacts

And keep in mind that this is a slideshow so these quality differences will not be easy to see in a few seconds.

btw i only do a new save with more compression and in progressiv mode thats all – the dimensions are exactly the same

do not forget to generate a mo file too. You have to upload both!

i dont know where this comes from – but the fast an quick and dirty way was:

.search_not_found > p {
    display: none;
}

so in total the rule was:

.search_not_found h3, .search_not_found > p,
.search_not_found .widget.avia_combo_widget {
    display: none;
}

how do you obtain the multilingual site? A plugin?
Because this “If you are not happy with the results below please do another search” should be turkish too! if you use a good language switcher !