How to shift down the slider for small screens

Resolved Startwebsiting
(@startwebsiting)

9 years, 12 months ago

Hello all,

I just started adjusting my website for small screens (resolution like 1024 to 1280) and I noticed that the slider overlaps with the menu bar when it should appear below the menu bar. Also, the text below the slider goes behind the slide. I’ve selected the new feature – Responsive settings in Customizr, however the issue is still present.

I was thinking to use the following code in my CCS:

@media screen and (min-width: 800px) and (max-width: 1280px) {

}

However I don’t know what should be the attributes in the @media.

Website:
http://www.startwebsiting.com/

Appearance on laptops – 10, 12 and 13”
http://quirktools.com/screenfly/#u=http%3A//www.startwebsiting.com/&w=1024&h=600&a=1&s=1

Thanks in advance,
Startwebsiting

Viewing 10 replies - 1 through 10 (of 10 total)

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

9 years, 12 months ago

Do you know what browser that emulator used?

Thread Starter Startwebsiting
(@startwebsiting)

9 years, 12 months ago

Hi and thanks!

I am not sure, but I’ve played with changing the resolution on both Chrome and Firefox and the result is the same as the emulator.

Thanks again!
Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

9 years, 12 months ago
I see. Looks like that’s coming from this style:
```
@media (max-width: 1280px) and (min-width: 800px) {
 .carousel-inner {
  position: relative;
  top: -50px;
 }
}
```
The “top: -50px”. So to override that try:
```
@media (max-width: 1280px) and (min-width: 800px) {
 .carousel-inner {
  top: 0;
 }
}
```
Thread Starter Startwebsiting
(@startwebsiting)

9 years, 12 months ago

Hi again,

I just inserted the code you provided me in my CSS Child file but it seems that noting changed. The slider still overlaps with the menu bar.

I also tried changing the value of “top=-50” to different numbers but it seems that the site doesn’t accept any changes of this kind.

Do you have any other ideas what could be the problem here?

Thank you!
Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

9 years, 12 months ago
Try:
```
@media (max-width: 1280px) and (min-width: 800px) {
 body .carousel-inner {
  top: 0;
 }
}
```
Thread Starter Startwebsiting
(@startwebsiting)

9 years, 12 months ago

Great, it works but now I need to move somehow the text below the slider and the three featured items a bit down because now they overlap with the slider.

Thanks!
Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

9 years, 12 months ago
Try adding:
```
body .carousel {
 max-height: none;
}
```
To your media query.
Rocco Aliberti
(@d4z_c0nf)

9 years, 12 months ago
You have this:
```
@media (max-width: 1280px) and (min-width: 800px)
.carousel {
margin-bottom: 0;
padding-bottom: 0;
max-height: 280px;
}
```
remove that max-height: 280px;
Thread Starter Startwebsiting
(@startwebsiting)

9 years, 12 months ago

Lol great 🙂 it works 🙂

Thank you very much for your help and time and for your quick replies.

Thanks!!!
Startwebsiting

Thread Starter Startwebsiting
(@startwebsiting)

9 years, 12 months ago

Thank you for your reply, d4z_c0nf.

I resolved the issue just by adding:

body .carousel {
max-height: none;
}

Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘How to shift down the slider for small screens’ is closed to new replies.

Tags