Docs

[bzkondracki]

Hello, I have just purchased my third X license, because it is so great.

I am working on a site running the Renew stack and have placed a slideshow inside the topbar. I have adjusted the height and padding of the topbar to match the slideshow in desktop view, but when in mobile view, there is a ton of space under the slideshow. Is there a way to adjust this?

Also, is there a way to force the slideshow to the left and right edges of the topbar? The width of the slideshow is 1050 px and I have the max site width set to 1050 px in customizer but there is still space to the left and right of the slideshow.

http://658.5bf.myftpupload.com/

[Friech]

Hi There,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.x-topbar .x-topbar-inner {
	max-width: none;
	width: 100%;
}

Hope it helps, Cheers!

[bzkondracki]

Thanks, that worked perfectly for the width! Is there a way to control the height of the topbar as the browser window is resized? When the window is sized down, the topbar expands out under the slideshow.

[Joao]

Hi There,

I fixed a few more things for you. I guess you will be happy with it 🙂 Now your sliders will stretch to the borders. and the container of the topbar will be a bit bigger on desktop so the slider can fit. I also think I gave you the right px numbers for the mobile view on the code below, if you notice there is some extra px or some pxs missing, feel free to adjust it.

Please try adding this code on your Appereance / Customizer / Custom CSS.

.x-topbar {
height: 180px;
}

.soliloquy-container .soliloquy-image {
width: 100%;
}

.x-topbar .p-info, .x-topbar .p-info a, .x-topbar .x-social-global a {
margin: 0;
}

@media only screen and (max-device-width: 480px) {
.x-topbar {
height: 63px;
}
}

Hope that helps,

Let us know if you need help with anything else.

Joao

[Author]

Posts