-
AuthorPosts
-
September 28, 2015 at 11:20 am #509935
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!
September 28, 2015 at 2:49 pm #510123Hi 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!
ElliottSeptember 29, 2015 at 12:47 am #510484Hi 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?September 29, 2015 at 10:05 am #510640Hi!
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!
YigitSeptember 29, 2015 at 10:23 am #510652Hi 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!September 29, 2015 at 10:27 am #510654Hey!
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,
YigitSeptember 29, 2015 at 10:31 am #510658Hi
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%;
}September 29, 2015 at 11:10 am #510669Hi!
> sign was converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field. I fixed it. Please review your website now
Best regards,
YigitSeptember 29, 2015 at 11:35 am #510680Great 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!- This reply was modified 9 years, 1 month ago by kaloraat.
September 29, 2015 at 11:57 am #510685its 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.
- This reply was modified 9 years, 1 month ago by Guenni007.
September 29, 2015 at 12:01 pm #510690Check 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.
- This reply was modified 9 years, 1 month ago by kaloraat.
September 29, 2015 at 12:16 pm #510695site 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%
- This reply was modified 9 years, 1 month ago by Guenni007.
September 29, 2015 at 2:37 pm #510765Hi 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!September 30, 2015 at 6:35 am #511125 -
AuthorPosts
- You must be logged in to reply to this topic.