How to get slider to auto-resize to content size? (pic)

Design help General
1

Hi guys,

kinda new at this and this is probably a really simple one. I am practicing building websites by rebuilding active websites and I ran into a weird little problem.

The website I am rebuilding is https://cornerstonetimberframes.com/

I want to create a slider at the top of the page similar to theirs. Now, I can copy the images, and what I thought I could do is put a slider at the top of the page, drag in the images, and the slider would auto adjust to the size of the images because width and height are both set to auto…except it won’t. Half of the picture is cut off horizontally. I tried using the pics as backgrounds, I tried dropping picture elements into the slider, I tried setting the width and height to 100%, etc, etc, etc…and I can’t seem to be able to get the slider to simply be the size of the picture that I want to use in it. Can someone please help with that? I watched the video tutorial in the webflow university but it shows a different scenario than I am trying to recreate, so it didn’t help in that regard.

Also, apparently you can navigate through the slides by clicking the slider navigator in the designer, but that doesn’t work on my acer laptop for some reason, wonder why? ( This is not that big of a problem though, although it would be nice if this function worked the way it is supposed to.)

Thanks so much in advance

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

I also wanted to add another quick question. How can I get the company logo to show up in the middle of the navbar? Tried all kinds of things, like copy and paste the nav menu div block within the navbar and sliding the logo in between them. It shows up ok in the navigator but in the designer the logo is still to the left of all buttons. How can I have the logo in the middle, and a few buttons to the left and right of it?

3

Hey guys,

I am a little disappointed that no one wants to help me with this…

I just want to know how I can have a full width slider simply be the size of the images that I want to display in the slides? Would really appreciate help with that.

Thanks in advance

1 Like
4

Hello VladyRahn

I was searching for a solution for this too.

The way I solved this was clicking on the parent slider and actively type “AUTO” into the height in size. The default auto doesn’t always work.

For the logo in the middle maybe try 3 columns or a grid.

Hope this helps :slight_smile:

4 Likes
5

just in case anyone sees this in the future, I also ran into this problem I was able to readjust the size by placing a div block inside and scaling that to the height I wanted.

1 Like
6

Hey Declan,

In case you want a solution to that, this is what worked for me, maybe not ideal but it does the job. I made all other slides that are not showing to 0px height so that the Mask will adapt to the actuals slide and here’s the solution:

.slider [aria-hidden=“true”] {
height: 0px;
}

Hope it helps

7

This solves it, thank you!