So I just joined web flow and I am stuck. So I am making a basic slider under a nav bar like the tutorial video stated. Overtime I do it even though I am choosing cover as well as adding classes to my images it cuts off a small portion of my images on the bottom where the slider nav bar is. I have tried everything. Within web flow everything looks great and then I go to preview it it always cuts off the bottom. It does cover it but some of my images have key graphics made. I have adjusted the slider from the default of 300 to 540px. I have added all my slides and gave them classes. I have added all my images and classed them as well and I think it looks great until I hit preview. I must have watched the demo video on how to do this a million times and I just don’t get it. I did see a disclaimer about how the tutorial is not the same user interface. What and I missing here? Thanks for the help I really want web flow to work for me.
Hi @firstkid7, thanks for reaching out Can you please update your post with some more information so we can help you faster? Things like your read-only link, and screenshots of the elements in question really speed things up.
Posting guidelines can be found here: Posting Guidelines for the Design Help Category
Thanks in advance!
thanks for the reply. Sorry about the rules I guess I should have looked first. Here is my read only link:
enter link description here
The first image is how it should look in the slider and the second image is how it shows up in the preview.
I am using Safari Version 8.0.6 (10600.6.3)
Thanks for the help!!! Much Appreciated
Oops I forgot to put the @. Please see my last post for you. Thanks
@firstkid7 I think this is where you are going to have to apply your design skills in relation to responsive design. The photos are going to scale based on browser width. Meaning that you will see more of the photo height at smaller scales. There are ways to try and avoid this or control what parts disappear. You might try setting the photo background position to the bottom. However, I’d probably edit the photo and move parts into a more centered position.
Hi @firstkid7, as @jdesign mentioned, there is some zoom occurring. When you set the background image to cover, it will zoom when the viewport exceeds the dimension width and height. You have an image there now that is 1152x519 and that means that the image is going to zoom on practically all desktop modes.
I would suggest using a larger image, like 1920x1080. You can compress the image to reduce the file size.
I hope this helps
Thank you @cyberdave and @jdesign for the help. I am a little confused. Is there not a standard size picture that works for a basic slider like this. I mean the guy in the tutorial did it with different size pictures and it worked perfect. Are there problems with safari or something on this. I am just confused as to why to images the same size would not work??
@firstkid7 is this still an issue? Send us again a preview link and I will try to write a code for you so you will always have a slider with proper height so the entire image is visible
Sorry for the delayed response @bartekkustra. Here is the preview link. https://preview.webflow.com/preview/triumphgymnastics?preview=73867cf954ab5c277cf99b7631decf2c
I just need a a basic slider that sizes the images right. I still don’t understand why if I have two images both sized the same why one shows up right and the other doesn’t. Thanks you for the help I really appreciate it. Also is there anyplace on the web where I can go and copy the code for basic stuff like this. I am not the best coder and trying to learn more. Thanks again for the help I really appreciate it…
Ok that is what I did but I never actually published this so maybe that was the problem. Please let me know if this link works. Thanks https://preview.webflow.com/preview/triumphgymnastics?preview=d04fe42d17043e08720867ee2ed80f49
Hi @firstkid7, thanks for the update. it looks like the background images on each slide have different positioning, can you check both images have this setup and then republish and see if the issue persists?
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.