portions of Advanced Slider cut-off on SurfacePro

HI. Any additional suggestions on this? I sure would appreciate it! :-)

Vinay, the closest thing to what I want to achieve is working correctly on most devices. You can see it correctly displayed at http://mitchelllindsey.fiveoaksdemo.com/. The problem I am trying to solve appears to be only on the SurfacePro where the top and bottom of the slider is being cut off, so the text at the top – “Electrical’ is not entirely visible, and the images at the bottom are not entirely visible either. So I suppose what I really need is to know the optimal dimensions and/or settings for the Advanced Layer Slider. OR, as an alternative, perhaps I don’t NEED to use the Advanced Layer Slider, since I am using only one slide? Perhaps there is another way to achieve this look without the Advanced Layer Slider?

Thanks again.

Vinay, here is a link to the images that show the Surface Pro view and the normal (correct) view. Thank you.

Mitchell & Lindsey Header

In case it helps, here is the entire block of css I have in the custom css field:

div .logo {
display: none !important;
}

.tablepress-id-1 {
width: auto !important;
}

.tablepress .column-1 {
width: 325px;
}

.tablepress .column-2 {
width: 200px;
}

.tablepress .column-3 {
width: 100x;
}

/*TEXT SIZE BIGGER AND COLOR DARKER PHONE INFO BAR*/
.phone-info {font-size: 20px !important;color:#2F4A87 !important;}

@media only screen and (min-width: 2000px) {
.surfaceclass {
margin-top: 0 !important;
}
}

Ismael, I entered the css code you provided in your last post, so the Quick CSS under Theme Options>General Styling now looks like what I have pasted below.

In addition, in your last post you had asked me to check the actual resolution of the SurfacePro. Here is what my client is telling me:

“The problem is still there. It does, however, change when I lower the resolution. I have my surface set at the highest resolution (2160×1440), which is the recommended resolution. If I lower the resolution, the banner gets better during each stage and looks perfect if I set the resolution low enough. However, I know a lot of people who use surface pros and the majority have it at the highest resolution.”

AND HERE IS THE CSS CODE AS IT NOW APPEARS IN QUICK CSS:

div .logo {
display: none !important;
}

.tablepress-id-1 {
width: auto !important;
}

.tablepress .column-1 {
width: 325px;
}

.tablepress .column-2 {
width: 200px;
}

.tablepress .column-3 {
width: 100x;
}

/*TEXT SIZE BIGGER AND COLOR DARKER PHONE INFO BAR*/
.phone-info {font-size: 20px !important;color:#2F4A87 !important;}

@media only screen and (min-width: 2000px) {
.surfaceclass {
margin-top: 0 !important;
}
}

@media only screen and (min-width: 2000px) {
#layerslider_8 .ls-bg {
margin-top: 0 !important;
}
}

Many thanks for your assistance, as I really need to get this resolved.

Best regards.

• This reply was modified 8 years, 2 months ago by Arrastia.