Hi Elliot,

Tried it, the image width is bigger, but still not the same. I first tried 160 and then 200% but it would not get bigger after 160%

Any other solutions?

Sincerely,
Morticka

Hi Ismael!

I tried your CSS code, but the image has the same width as the text below it and I would like it to have a bigger width then the text.

The CSS code Elliot gave me is the effect I’m looking for.

I put his CSS code back and restored the original loop php file as well, so you can see what I’m after. But, with his code the featured image on deskop looks perfect, but on mobile is too small. If I remove his CSS code as well, the featured image looks good on mobile, but then I’m back where I started and the featured image looks huge on the desktop.

So,

1. How can I make the image look good on mobile and the desktop, with the width bigger then the text below?
2. Is there another way to put the Title above the featured image and keeping the width of the featured image as it is now?

Sincerely,
Morticka

Hi Elliot!!

1: Yes, I want to reduce both, only the width should be bigger then the text below. I would like to be able to choose, say a standard width of 701px, without distortion of the image?

2. I work with a child theme and I have already made changes to loop-index.php earlier with you guys, so the line numbers are different now. Can you be more specific where to place the //echo preview image files exactly?

Sincerely,
Morticka

That’s it Yigit, everthing works like a charm!! :D

Sincerely,
Barb

Hi Yigit :),

I did’nt understand the first one:

1- Please change the code to following one

@media only screen and (max-width: 990px) {
li#menu-item-search>a { font-size: 24px!important; }}

I already changed the size of the icon, and I want to keep that size. But, when you type something in the searchbox, the font you see in the dropdown box is as big (I think?) as the size of the icon. And I only want to change the font in the dropdown box, or is that not possible?

2: Yes, it shows up on iPad!! :D But it needs to move a little to the right, also towards the hamburger menu? On smartphone everything is perfect aligned now, just not on iPad.

Sincerely,
Barb

Hey Yigit ;),

Thx, works! How can I make the icon bigger and move it to the right, toward the hamburger icon?

Sincerely,
Barb

Haha, hi Yigit ;),

As always, works like a charm, thank you!!!!

Sincerely,
Barb

Guys, I’m going for the weird elastic band solution with the stutter. With the 60% the logo looks HUGE on mobile, while with the previous code Yigit gave, the logo looks the right size and crisp on mobile.

Josue: Ik put avia.js back in its original state in the Enfold parent theme.

So this is the final code:

.logo img {
padding: 20px 0;
}
.header-scrolled .logo img {
padding: 4px 0;
}

I’m giving up. Thanks for all your help and patience guys :D Everything else I asked of you on this forum still works like a charm and you are the best support team EVER!!

On to the next code request ;)

Sincerely,
Morticka

Hi Josue :),

Edited the file, shrunken header and logo is larger now, but I’m still getting that weird elastic band effect, where the logo “jumps” to the smaller size. It even stutters a bit now.

<EDIT> I created the js folder in my child theme and put the edited avia.js file there, but that did’nt do anything. Only the edited avia.js file in the Enfold parent theme responded to the edit.

Could it have anything to do with the existing CSS code?

/*Logo Styling PC keeps logo in the middle of the header*/

.logo img { margin-top: -10px; }
.logo a img {
vertical-align: middle;
display: inline-block;
}

/*Logo Styling Responsive*/

@media only screen and (max-width: 480px) {
.responsive .logo a{
height: 100px !important;
}
.responsive .logo img{
height: 50px !important;
}
}

@media only screen and (min-width: 767px) {
.noDesktop{ display: none !important; }
}
@media only screen and (max-width: 767px) {
div#header_meta {
display: none;
}
.logo img {
top: -5px;
}
}

@media only screen and (max-width: 767px) {
.responsive .logo a, .responsive .logo img { height: auto !important; }}

/*Breedte van de website in responsive view*/

@media only screen and (max-width: 767px) {
.responsive .container {
width: 90%;
}}

Sincerely,
Morticka

• This reply was modified 10 years, 4 months ago by Morticka. Reason: After editting the avia.js file in the parent theme, I put it back as it was and put the edited avia.js file in my child theme, but that did not do anything

Hi Peter,

Thx for your response, but nothing changed :)

First I tested with edited index.php and the file in the framework file in my child theme and then I removed both files, but nothing happened?

Sincerely,
Morticka

WOW, the logo looks so crisp and beautiful on my Android smartphone right now!!!!! :D :D :D :D

You are amazing Yigit, thank you so much!!

It looks perfect on my desktop, no scaling necessary, but in shrink view the logo is a little bit to big. Can I change that with code too? (I tried messing with the padding, but then I got a really tiny logo :D)

Sincerely,
Morticka

Hi Yigit,

Correct, that’s what I said. Your Pinterest logo has a resolution of 149 something, my logo has a resolution of 299 now. If you check the website you see it’s still blurry.

Sincerely,
Morticka

Hi Yigit,

No, I don’t have a retina device :) Have not started testing on those yet.

Your logo does look better though. I’ve looked at the resolution and it’s a lot higher then my logo, which is to my surprise the standard web 72 ppi. I obviously keep making the same mistake; editting the logo in 300 ppi and then saving it in 72 ppi!! So I’m havng a little “duh” moment right now ;)

So, this time I saved my logo in 300ppi, uploaded it as logo and then downloaded the image again to see if WordPress made any changes to the resolution…and it still looks blurry compared to the crisp text. (I work with photoshop and illustrator)

I would not know what else to do.

Sincerely,
Morticka