-
Posts
-
Hi there,
I have few important questions:
Q 1. I want my logo which is 1920px wide and 300px tall to go full width. It is only sitting in the middle at the moment. I want it to stretch all the way from the right edge of the browser to the left edge.
I tried many days and night and tried all the codes that you have suggested in forum but unable to achieve something so basic, which is a real shame! Please help me out.Q 2. My website is extremly slow, I have never used a website as slow as this. It is hosting on godaddy’s economoy plan. Can you please help me figure out what is the main reason for this? is it hosting or something else? if it is hosting, please suggest me a proper host for wordpress website running enfold.
Thank you very much!
Hi kaloraat!
1. Add this to your custom CSS.
.logo, .logo * { width: 100%; }You may want to resize the logo so it’s height is around 116px. Or if you want to increase the header a bit so it still looks normal then you can do that in Dashboard > Enfold > Header.
2. Yes, your site is hanging up on something, took 20 seconds to load for me. I didn’t see anything out of the ordinary so I would say it’s something to do with the server. If your hosting provider doesn’t help you out here then I recommend trying out siteground, https://www.siteground.com/. I’ve been using them for about a year now, no problems so far, the support is very quick as well.
Cheers!
ElliottHi Elliott,
It is not full width yet. It also moved to the left instead. I want it full width and 300px in height. That is the height of my logo.
How to achieve that?Hi!
Please add following code to Quick CSS
.html_header_top.html_logo_center .logo { left: 0; -webkit-transform: none; -ms-transform: none; transform: none; }and set header height to 300px in Enfold theme options > Header
Cheers!
YigitHi Yigit,
Thanks for your reply. It is bit bigger now. However i want to make it stretch across the screen like the layer slider does, is it possible?
Also, there is a big white space under the logo after applying the css that you suggested. If it stays the same, there is no point using it. It looks awful :)
please suggest me a better solution, Thanks!Hey!
Please add following code to Quick CSS as well
.logo img { width: 100%; } #header_main > .container { margin: 0; padding: 0; max-width: 100%; }Best regards,
YigitHi
There is still big white space underneath, now when i scroll down the logo is distorted and pressed. this is the complete code i have applied so far..logo, .logo * { width: 100%; }
.html_header_top.html_logo_center .logo {
left: 0;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}.logo img {
width: 100%;
}
#header_main > .container {
margin: 0;
padding: 0;
max-width: 100%;
}Hi!
> sign was converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field. I fixed it. Please review your website now
Best regards,
YigitGreat job, thank you very much Yigit. There is one thing still left to fix though:)
when we scroll the page down, the logo gets distorted and pressed down which looks very unprofessional. How to scale the logo to smaller size if needed while scrolling the page down. I like the way header size shrinks on page scroll but I just don’t want the logo to get distorted like that.
Can you please help fixing it.
Cheers!its sad that we other users couldn’t see the page – we often have similar Problems – and so this solution might only be helpfull for you.
2.) Very often the reason for slow speed is the missing of gzip; zlib compression on the serverside (check it here f.e.: http://checkgzipcompression.com/ )
Maybe your logo is to big in size ? If it is possible to use instead svg files this might help in many ways. Even very small shrinked Logo is very sharp. The filespace is often very small. (have a look on this page: http://webers-testseite.de/koelnteam/wp-content/uploads/2015/09/koelnteam-logo.svg )
the logo above is set via Sourcecode of svg :
preserveAspectRatio="xMinYMid meet"
to shrink to the left side but center on height.
etc.only that fuc….. IE8 could not handle svgs. but you can do a fallback for that case to png/jpg.
If zlib and or gzip is enabled you can use plugins like WP Supercache to speed up your site. etc. pp.
Check out my website:
Website is running ok at the moment, I think it is server problem. Go daddy hosting is really not consistent. Thanks for your reply.
site at the moment does not open. Server not found : why there is a result for gzip test from link above ??
gzip is not enabled on the server “77% Could be saved by compressing this page with GZIP.”
so contact your hoster or login at your hoster and have a look wether there are any possibilities to activate gzip compression._ i could not achieve more than this here – http://webers-testseite.de/enf02/googlemap/
the point is the shrinking header has its own js calculation of the header height.so a skew is resulting. If you have the whole screenwidth for logo width.
The example above is set by:
#header_main .container { padding: 0; max-width: 100%; } .logo img { display: block; height: calc(18vw); max-width: 100vw; padding: 0; width: auto; }the css vw means viewport width and for height i do a calculation because 1200:211 is nearly 18%
Hi there, I repost it just to avoid confusion and make it easy for you to answer…
Great job, thank you very much Yigit. There is one thing still left to fix though:)
when we scroll the page down, the logo gets distorted and pressed down which looks very unprofessional. How to scale the logo to smaller size if needed while scrolling the page down. I like the way header size shrinks on page scroll but I just don’t want the logo to get distorted like that.
Can you please help fixing it.
Cheers!
- You must be logged in to reply to this topic.