Search box and bootstrap slider issue on mobile

Sorry the problem doesn’t come from the search box but from the header menu.

Here the screen shot of the issue

View post on imgur.com

Hi,

Please post your website url.
Then users here can look at the page source code and provide a solution.

Thanks!

Hi,

There is the Url: https://www.theseagullworldtrip.com.

In fact the problem appear when the screen size change and in some specific size the bootstrap slider is hidden of half of his slider by the menu.

Thank for your help

I’ve got the same issue. For now, I’m just hiding what’s not fully shown!

Hi

Add the following in Theme Options -> Custom CSS

@media screen and (max-width:768px){
.search {
    position: relative;
    top: -10px!important;
}
}

This code move up the search box in mobile, see if it helps.

Thanks!

Actually, the problem occurs without the search box as well.

It seems that the title/subtitle/call to action are not responsive inside the banner

Hello!

Thanks you bonbutterfly. You are true, in fact it’s not a problem with menu or search box, it’s only on .caroussel caption when the screen is on specific size, the text go out of the slide by the top so it’s hided on the slide. It’s only a text problem cause the image is not cut.

I have to test with css margin, padding and else to manage the position of all this text.

A other think that I want to improve its to also make the button “see more” smaller when the screen size go smaller also.

I didn’t tried until now.

Thanks for your response in this topic, you helped me a lot and don’t hesitated telling me more ??

Ciao!

Hey buddy!

You’re welcome! I had a hard time with this banner as well > <.

I did it the easy way so far as I’m not perfect in CSS. I gave you the code with some comments in english (as they are in mostly French!) (see all the stuff after my post)

Basically,I just add a display: none; so that when the screen is smaller, all the block of texts/buttons are still properly shown. I open to suggestion though!

Another thing, you might have seen that the title of the first box (H2) is bad too.. In fact, there’s a media queries changing the font-size to 120% over 768px. That’s quite awful after because you can’t fix the transparent background size properly… And you can’t create a code over this one (or maybe you can, but I’m still a newbie!).

Any suggestion here as well?

/*------/
/Banner/
-----*/
/*Position du bloc (rectangle positions*/
#bootstrap-slider .carousel-caption {
    position: absolute;
    top: 10%;
    max-width: 30%;
}

/*Responsive: sous-titre pour voir le CTA correctement  (remove the subtitle  on smaller screens then the button itself) */
@media screen and (max-width: 900px) {
	#bootstrap-slider .carousel-caption p {
		display: none;
	}
	#bootstrap-slider .carousel-caption {
	top:20%;
	}
}
@media screen and (max-width: 620px) {
	#bootstrap-slider .carousel-caption .button {
		display: none;
	}
}

/*Désactivation boutons slider (only if you have one image)*/
a.left.carousel-control,a.right.carousel-control {
	display: none !important;
}