Hi Rikard,

thank you very much for your reply.

I am a little bit confused that you were seeing the logo flush to the right edge because it was always cut off on different computers in different browsers here. Please see screenshot (that was the way I was seeing it) and please let me know if it looked different on your end?

And thank you very much for the CSS.
Those allowed me to make the adjustments exactly as I wanted:

@media only screen and (min-width: 767px) {
#top .av_header_stretch .container {
width: 100% !important;
margin: 0 35px;
}}

@media only screen and (min-width: 767px) {
.html_header_top #top .av_logo_right .logo {
right: 52px;
}}

Now it looks great. So if that’s technically okay, the problem is solved.

Thanks a lot in advance for a final reply in this case.

Best regards,
fkm

Hi Rikard,

the topic is successfully completed, so please feel free to close it.

Thank you.

Best regards,
fkm

Hi Rikard,

that’s pretty close. :)

On the left side of the page the menu moves exactly those 20px to the right on all devices as desired.
However, the logo on the right side also moves to the right instead of to the left so the logo cut off (please see screenshot).
If that could be fixed, the goal would be achieved.
Please help.

Thanky you very much in advance.

Best regards,
fkm

Hi Rikard,

is it also possible to define not the width of the website as fixed pixel value, but the spacing from the margins?

Thanks for another reply in advance.

Best regards,
fkm

Hi Rikard,

thank you very much for your reply.

If that’s possible, I would even prefer fixed pixel values for all devices.
Please let me know how to do.

Thanks a lot in advance.

Best regards,
fkm

Hey Rikard,

thank you very much for your quick reply/help.

This CSS works fine for large screens (desktop), but it makes the margin too small on tablets and smartphones.
So I tried the following addition and it seems to work in an acceptable way:

@media only screen and (min-width: 1200px) {
#top .av_header_stretch .container {
width: 98%!important;
}}

Although I´d prefer pixel-precise constant margins for all devices (desktop and mobile), it’s still okay as it is now, if that would be too complicated!?

Thanks a lot for another reply in advance.

Best regards,
fkm

Hi Rikard,

this topic can be closed. Thank you very much.

Best regards,
fkm

Hi Ismael,

you’re right, I spontaneously decided to remove the subtext and just wanted to inform you about it in this topic.
You were faster. :)

Nevertheless, thank you very much for your help. Now I know what to do if I´ll add a subtext again.

However, for the view on the smartphone, I would like to place the logo a little higher.
With the following CSS this works for larger views, but not for smaller ones like smartphones:

#top .logo {
width: 108px!important;
font-weight: 600 !important;
letter-spacing: 0.0em!important;
display: flex;
align-items: center;
top: -20px!important;
}

Please let me know if there is a more efficient CSS for this matter or how to place the logo a little higher for smartphones.

Thanks a lot in advance.

Best regards,
fkm

Hi Mike,

everything works great, just as imagined.
I’m really happy – thank you so much! :)

I just noticed during testing that the standard text for no search results is a bit long for my case:
“Entschuldigung, aber kein Eintrag erfüllt Deine Suchkriterien”
Although I spoke of “final points” before, I would like to ask you again for your help in this case.
Is it possible to shorten/change the text?
Please also see screenshot.

Thanks a lot in advance.

Best regards, fkm

Hi Mike,

every single one works just fine – thank you very much!

With enlarging the images of the ajax portfolio preview at mobile devices to full width, the text below did the same of course.
So I tried adding the following code to get margins on the sides and it seems to work:

@media only screen and (max-width: 767px) {
#top .portfolio_preview_container .portfolio-preview-content {
padding: 0px 16px 0px 16px!important;
}
}

If that is ok then this topic is succesfully done and can be closed.

Thank you very much again.

Best regards, fkm

Hi Mike,

thank you so much for your reply and the css.
It works just fine – great!

Please also let me know how to reduce the height of each search result to bring them closer together vertically (please see screenshot point 2).

Thanks a lot in advance.

Best regards, fkm

Hi Rikard,

you can close it – thank you very much.

Best regards, fkm

Hey Mike,

thank you very much for your reply/support and please excuse my delay.

The code basically works well, it´s sliding now.
However, there are still a few differences to the slide effect for the next portfolio entry on the right:
– the preview for the previous portfolio item (left) slides out from the edge of the screen, on the other side it slides out of the arrow
– the previous portfolio entry also seems a bit sluggish/slower and slides out with a jerky end
– and the slide (left) is already activated when getting close to the arrow, on the right only when hovering over the arrow

Please have a look yourself.

Can the points mentioned be adjusted without much effort so that both sides are uniform?
Otherwise, I’d leave it as it was originally – after all, it’s absolutely fine (although not exactly the same) as it is.

Thanks a lot for another reply in advance.

Best regards, fkm

Hey Ismael,

every single code works just fine – thank you so much.

As you adviced, I deactivated the functions for file compressions (CSS and Javascrit) under Enfold/Performance.
Should I keep it like that in the long term?

In addition, please let me know how to redesign the search results box (change position, add/remove borders, adjust spacing) – please see screenshots.

Is it possible to disable the connection to the search results page and only use the above-mentioned box for the search?
If so, please let me know how to disable the redirect to a search results page feature.

Thank you very much in advance.

Best regards, fkm