I want to position the search widget so it sits at the top right of the screen when displayed on desktop. It is left aligned but in the right place when viewed on mobile devices. However, it would look a little better if it was centered on mobile:
Thanks in advance, Lee
Hi there @Lee5 
Just to make things clear: do you want to display the search in the top right corner (option 1) or align it to the right within the existing container (option 2)?
Hi Max, ideally I would like it to be position 1. I would move the navigation over to the left to allow the search on a desktop to sit to the right of the navigation.
Got it, thanks!
We’ll be happy to customize the widget for you. However, could you first move the navigation so that there was enough space in the right corner for the search?
Hi Max, I have mover the navigation more to the centre of the screen. It will take a while to update on all pages.
Thanks!
I’ve passed it to the devs. I’ll get back to you once I receive a response from them 
Our devs customized the search positioning. This code was added to the Custom CSS field on the Settings tab:
@media (max-width: 500px) {
.global-styles,
div:has(>.elfsight-app-794e5589-7c86-4b73-8448-d7a44ae6dc78, >.ceewi-wrap>.elfsight-app-794e5589-7c86-4b73-8448-d7a44ae6dc78) {
display: flex;
justify-content: center;
}
}
.global-styles,
.root:has(>.elfsight-app-794e5589-7c86-4b73-8448-d7a44ae6dc78, >.ceewi-wrap>.elfsight-app-794e5589-7c86-4b73-8448-d7a44ae6dc78) {
padding-right: 0 !important;
}
.global-styles,
.ceewi-wrap,
.elfsight-app-794e5589-7c86-4b73-8448-d7a44ae6dc78 {
display: inline-block;
}
And this script was added to the Custom JS field:
const widgetContainer = document.querySelector(".elfsight-app-794e5589-7c86-4b73-8448-d7a44ae6dc78");
const desktopContainer = document.querySelector(".root");
const phoneContainer = widgetContainer.parentNode;
const mediaQuery = window.matchMedia("(max-width: 1020px)");
const handleChange = (event) => {
if (event.matches) {
phoneContainer.append(widgetContainer);
return;
}
desktopContainer.append(widgetContainer);
};
mediaQuery.addListener(handleChange);
handleChange(mediaQuery);
Check your website and let me know if you like the result
Hi Max, It all looks fantastic now exactly as I wanted. Many thanks to you and the dev team for such as speedy job 
Great! You are always welcome 
Hi, I have just noticed that the search field is laid out correctly on this page.
[Bay Window Curtain Tracks]
But on this page, the search field is squeezed to the left.[wall mount curtain track]
Does anyone have any idea what might be causing this? The search code for both pages is within an include that repeats across my website.
Hi @Lee5
We’ve fixed the issue by adding this code to the Custom CSS field:
.eapp-photo-gallery-item-data-image {
object-fit: contain !important
}
.eapp-photo-gallery-item-data-image,
.eapp-photo-gallery-item-data-imageContainer,
.app-photo-gallery-item-data-component,
.eapp-photo-gallery-columns-item-component,
[class*="CarouselItem__CarouselItemContainer-sc"],
[class*="CarouselItem__CarouselItemContainer-sc"] > div,
.swiper-wrapper,
.eapp-photo-gallery-columns-main {
height: fit-content !important;
}
.eapp-photo-gallery-item-data-image,
.swiper-slide, .swiper-wrapper {
max-width: 950px !important
}
Check your website and let me know if it’s fine now
Hi Max, The photo gallery now looks great with square images.
Just the squeezed search field to solve now.
Sure, here is the code we used to fix the issue:
.global-styles,
.root {
width: 100% !important;
display: flex !important;
align-items: center !important;
}
.global-styles,
.root li {
height: fit-content !important;
}
.global-styles,
.root > div {
width: 100%;
display: block
}
.global-styles,
.elfsight-app-794e5589-7c86-4b73-8448-d7a44ae6dc78 {
display: block !important
}
[class*="Inner__Container-sc"] {
width: 100%
}
Hi Max, The latest CSS on the search widget worked great on desktop. However, it really messed up the menu on mobile view. I have gone back to the earlier CSS
@media (max-width: 500px) {
.global-styles,
div:has(>.elfsight-app-794e5589-7c86-4b73-8448-d7a44ae6dc78, >.ceewi-wrap>.elfsight-app-794e5589-7c86-4b73-8448-d7a44ae6dc78) {
display: flex;
justify-content: center;
}
}
.global-styles,
.root:has(>.elfsight-app-794e5589-7c86-4b73-8448-d7a44ae6dc78, >.ceewi-wrap>.elfsight-app-794e5589-7c86-4b73-8448-d7a44ae6dc78) {
padding-right: 0 !important;
}
.global-styles,
.ceewi-wrap,
.elfsight-app-794e5589-7c86-4b73-8448-d7a44ae6dc78 {
display: inline-block;
}
Now the mobile view is good and some of the pages on desktop are good. However, the pages that drop down from the menu tab “Straight Tracks”. All the pages here are showing the search in the correct position but it is being squashed horizontally.
Sorry forgot to add if it’s some other code on my pages that can be amended to cure this problem. Then let me know.
Thanks, Lee
Hi @Lee5
We’ve adjusted the appearance of your search with this code:
[class*="SearchBar__Input-sc"] {
width: 100% !important;
height: auto !important;
}
Please check it and let me know if it’s fine now
Hi Max, Just checked mobile and desktop. Both are working great now. Many thanks to you and the dev’s.
Thanks, Lee
Awesome! You are always welcome
To change the position of the search widget on desktop, you can use CSS to adjust its alignment. Try adding the following code to your stylesheet:
@media (min-width: 768px) {
.search-widget {
position: absolute; /* or fixed, depending on your layout /
top: 10px; / adjust as needed /
right: 10px; / adjust as needed */
}
}
@media (max-width: 767px) {
.search-widget {
text-align: center; /* to center on mobile */
}
}
This will position the search widget at the top right on desktop while allowing you to center it on mobile devices.
I have implemented similar changes in one of my projects website, where I also used specific CSS adjustments to enhance layout responsiveness.
Hopefully, this will help you out.
The issue was caused by the website styles and the codes from another widgets, but now it’s resolved.
Anyway, a huge thank you for /the involvement and sharing your solution