Logo Area Slider Issues On Tablet & Phone

Thanks, Victoria! This worked great for taking care of the tablet issues. On the phone screen, however, the image in the slider is not behind the transparent logo and still below the logo/header area. Is there a fix for that? Appreciate the help!

Valerie

Hi Victoria,

That worked great! The logo was partly hanging over the slider image, so I adjusted the min-height and height to take care of that issue.

Next question: is it possible to have the logo and full main nav menu show and be centered when the phone is rotated to landscape? Should I start another thread for that?

Valerie

Again, to everyone who is helping, thanks!

I am still having an issue with the positions of the logo and slider image that is under the transparent header on a phone screen. In portrait view, the logo flows over the bottom of the slider. The slider image needs to extend to just below the logo and maintain the scale in the horizontal direction. I tried the following code and, while it worked to extend the slider image to just below the logo, it did not scale horizontally when it was scaled up vertically:

@media only screen and (min-width: 768px) and (max-width:1024px) {
#layer_slider_1,  #layer_slider_3{
      min-height: 190px;
}
.ls-wrapper.ls-bg-outer, .ls-wrapper.ls-bg-outer img, .ls-inner {
   min-height: 190px;
   height: 200px !important;
}
}
@media only screen and (max-width: 767px) {
#layer_slider_1,  #layer_slider_3{
      min-height: 100px;
}
.ls-wrapper.ls-bg-outer, .ls-wrapper.ls-bg-outer img, .ls-inner {
   min-height: 100px;
   height: 110px !important;
}

The link to the site is in the private area.
Thanks for thinking about this.
Valerie

Thanks, Ismael. Everything is working great except for two issues remaining only in portrait view on phone: Link to site in private area.

1. The bottom of the logo is still over the bottom of the image behind it.
2. The menu symbol is still not changing to the color I specified.

Also, I tried using the color section but ended up with the image not extending across the entire screen and scaling properly.
Can you help with #1 and #2?Then I’m good to go.

Appreciate the help!
Valerie.

Hi Ismael,

I have checked the CSS code and corrected an error. With the exception of phone portrait display, the home page is displaying as I intend it to. There is still one issue with the portrait display on my Android phone, Samsung S8. The logo (the word “graycful”) is not entirely on top of the slider image. I have cleared the cache multiple times, and the problem persists. We have focused on increasing the height of the slider image, which has been tricky and resulted in horizontal scaling issues on the phone, or other directional scaling issues on a tablet. I wonder if the easier task is to have the logo scale a little smaller for only the phone portrait display.

A link to an image with issue is in the Private Content. I also created a new user and password for your access to the CSS, and the login info for that is also in the Private Content. Thanks for checking this out for me. I’m sure you’re just a ready as I am to resolve this. ;-)

Valerie