Illdy adjustments [logo, jumbo image, font ]

Hello colorlib, first of all, I would like to thank all developers for making such as beautiful theme as Illdy is. It’s look is absolutely amazing and I’m glad that I chose this theme for my WP site. Sometimes, I would expect little more customizability, but I hope you guys will add more customizable features in later patches.

Let’s jump to my questions/problems. Before, I want to say that I’m pretty newbie to WP and I don’t really know web programming languages, so I want to say sorry for all my (maybe silly) questions.

1. Making page logo responsible
When I’m resizing the page, the logo height stays the same. Which is problem especially for mobile devices with low resolution, because logo doesn’t fit on the screen etc. I would like to make it auto resize for mobile devices. I searched the forum, there were similar problems but only for sparkling and travelify, and neither of those codes worked for illdy.

2. Jumbo Image (header image)
Default behavior of illdy is that when smaller resolution is used, jumbo immage is automatically cropped/zoomed to the upper left edge of that particular image. But let’s say I have some object in the middle of the image and when mobile device is used, user can’t see this middle object, because illdy automatically zooms it to the left. Is there a way how to fix this behavior? I would like jumbo image to be zoomed on the center of the image, rather than on the left.

3. Minimum page font size
I was also looking for the way how could I set up the minimum font size for every type of text on the page, so if the font which is fewer than lets say 16px will be adjusted to 16px and other (like h1, which are larger would stay untouched). The problem is, that I find text on the static front page too small. Is there a way how to increase static page font/all font on the page?
I also tried solution on Illdy changing font size of the posts, which worked well, but text on the front page stayed as it was.

4. Text spacing
My jumbotron text is on 2 lines, but spaces between these lines are too thin. I had it fixed by friend in ./sections/front-page-bottom-header.php, but I believe there is a more scalable fix right in the styles.css.

I also had a problem/bug found in the https://colorlibsupport.com/t/responsive-menu-position/, but the code fixed it well.

I hope my problems will help you to make some things more customizable in future releases for the user’s convenience :slight_smile:
Thanks for the help, will appreciate all replies.

Hello,

First of all, thank you for the kind words and for using our products, we’re always trying to keep eye for improvements and a bug free experience!

To handle the logo size, a media query need to be used to handle it:

@media only screen and (max-width: 767px){
#header .top-header .header-logo img {
    max-width: 100px;
}}

Use this to center the header image:

#header {
    background-position: center;
}

I think this is what you are looking for the homepage text sisez:

.front-page-section .section-header p{
font-size: 20px;
}

I’m not quite sure about the 4th issue and how I could help.
Screenshots are always appreciated.

Let me know if you got everything alright.

Regards

Hello, thanks for your reply!
I’ve been playing with Illdy and wordpress for a couple of days now, and I’m finally beginning to understand it’s customizability through HTML codes.
I’ve also tested your codes for my issues with the following results:

1. Resizable logo
Not working, I also used max width 100 % and height auto parameters, but logo size stayed the same even after resizing the page to the resolution lower than the logo itself. Seems I can’t fix this issue myself, so if you have another idea I’ll be glad to hear. Btw my (problematic) logo is size 320 × 57 px.

2. Centering Header image
Yea, thanks, it went fine! I tuned it with some % instead of center keyword, but your code helped me quite a bit :slight_smile:

3. Text sizes
Didn’t quite worked. It resized some of the frontpage text, but not all as I wanted. But as I said, I’ve learnt how to inspect html code, so I can make small fixed myself. So I basically tuned it in conjunction with your code, so thanks!
My extra code:

#header .bottom-header p {
    	font-size: 17px;
}

#about .skill .skill-bottom span {
	font-size: 19px;
}

#contact-us .section-content .contact-us-box .box-right span {
	font-size: 17px;
}

body{
	font-size: 17px !important;
}

4. Text spacing
Well, I’ve already found the solution by myself. All I needed was:

#header .bottom-header h2 {
	line-height: 1.05;
}

I don’t really know, why is the default setting at the value of 0.74. It looks weird and when people use unicode chars (like ščťž in my language), it automatically collides with text in upper line. I hope you guys will implement fix to the next illdy release. Also, adding a easy way to change font size in GUI admin panel would be also nice :slight_smile:

Anyway, may I still ask for the help with the logo? It doesn’t resize automatically as I said before, and I really have no idea what may be wrong. Also, when I’m using logo of this particular width, my menu collides with the logo itself. So is there a way how to set static logo location or adjust main menu borders? Thanks for all your support, colorlib is really amazing :slight_smile:

Hello,

Would it be possible to provide me live preview of the website (maybe via private message) so I can have a closer look at why the logo code is not working?

Happy that I could help with the others issues.

Regards

Sure, sorry for late answer but I was quite busy last few days (my pokemon trainer won’t level up himself :slight_smile: ), but now I’m finally up to finishing the web.
Here is the link to the site: beta.toptennis.sk

I’ll be really glad if you could help me with that resizable logo (don’t mind it, it will change - the font type is absolutely awful :), I just need the right functionality :slight_smile:
Also, is there some possibility to change position of that logo/menu? Because as I said before, they collide and it doesn’t look good.

Thanks.

Have great day!

Hello,

Here you should use a different CSS code to handle the logo size:

@media only screen and (max-width: 767px){
.custom-logo {
    max-width: 200px !important;
    height: auto !important;
}}

Additionally, using a smaller font and spacing for the menus looks like the solution you are looking for, but it seems like you could use the sub-menu if you can group any items from the menu, since right now there are simply to many.

#header .top-header .header-navigation ul li{
    font-size: 14px;
    margin-left: 20px;
}

Good luck fixing and…catching 'em all

Thanks for the code! The one for logo image is working perfectly!

I didn’t test the second one, because it’s not exactly what I meant. I don’t actually mind that menu is in 2 rows, but the problem is that menu text is colliding with the logo image (I guess it’s normal behavior when bigger logo image is used than recommended value). So I’m sending an attachment which will describe the situation (Yeah, I need to change a font color :smiley: ).
According to this, I’m looking for a fix that would set static location for the menu, so it won’t collide with the logo. Actually I’m thinking about placing menu under the logo by a few px. However, I have no idea how to make code like this, so I would accept a helping hand if possible :slight_smile:

Thanks for the help!

Have a nice day :slight_smile:

Hello,

You should just have a look with the second CSS code, as well
It actually provides your solution at it should handle the spacing and makes the menu not overwriting the logo at any resolution, as on tablets the mobile burger replace it anyway.

Regards

Hello, I can’t say your code didn’t work, but it just didn’t look good. I’ve tried to play with it a bit. Although I don’t really understand it’s behavior, let’s say I achieved what I meant with the following code:

#header .top-header .header-navigation ul li {
    	margin-left: 31px;
	position: relative;
	top: 35px;
	left: -160px;
}

Menu is now placed under the logo itself, of course it doesn’t look as good as the original illdy design, but I guess it will be fine.
Anyway, thanks for the code again, I wouldn’t be able to access the menu without your help. Thanks a lot again! You can lock the theme or whatever you are doing with fixed problem topics :slight_smile:

Have a nice day

I’m happy that you found the solution to your issue!

Have a great end of the week

As close as I can find…

As per OP, I congratulate you on such an outstanding theme! Very nice :slight_smile:

I have trolled all the threads and cannot find a answer to this…

I have created a logo (vector EPS) that I can scale any which way I want and maintain perfect resolution.

I export in the ratio of 105x75… But bigger like 210x150… as PNG, or high res JPG etc.

Load it using customise gen settings, logo. Loads fine. Just looks rubbish. No matter what I do…

Same image looks perfect in the footer ‘copyright’ section.

Some have asked this in past and no real answer, that is publicly visible. I have tried the above CSS code, and the colorlib plugin too, to no avail.

Will do a subsequent post with the site address, set to private.

Thank you, in advance, for your help!!

//I notice it host in a wp.com… domain… I am preferring to have it load locally. If I open image in new window and compare to original image, its quality has been significantly reduced…

Site in question: Insane Vehicles

Next question is I have set body:

body {
line-height: 1.6;
background-color: #000;
font-family: “Source Sans Pro”, sans-serif;
font-weight: 400;
font-size: 16.5px;
color: #999;
}

However pages (like home page created in wordpress, not the about, services, etc) conform in header and font, but not background…

What have I done wrong?

Attached is the black to white showing… Single home page set, at single page.

//same site as priv reply…

thanks!

Hi @borngeek,

Could you be kind to post a new thread with all your questions?

This will help us keep the forum easy to use for each user, easy to follow and easy to find solution.

Thank you,

Cristian