Site looks fine in Webflow but not when published

[Levans]

Hi everyone,

I’ve made a very simple single page site with an image slider and it looks fine in Webflow in all preview sizes, but it doesn’t look/behave the same when published on the web.

The site in Webflow is here:
https://preview.webflow.com/preview/iconiarecords?utm_medium=preview_link&utm_source=designer&utm_content=iconiarecords&preview=22813d0e705dfed464190359b638c667&mode=preview

The published site on the web is here:
www.iconiarecords.com

There are 3 problems with the published site:

1. On both desktop and mobile, the slider slides only display the background images; the top images aren’t visible. Confusingly, on my Macbook I got a tiny square with a question mark inside it instead of the top slider images. When I clicked this, the top slider images then all appeared!
2. On desktop if I reduce the size of my browser window the copyright section at the bottom of the screen jumps to the bottom-left corner, rather than remaining positioned in the centre.
3. On mobile devices it’s possible to slide the whole site all around the screen as well as zoom right out to make it a tiny part of the screen that then jumps to the top left. I just want the site to always fill the screen horizontally, and scroll vertically.

Can anyone give me any pointers on what I’ve done wrong? Complete web design n00b as you can probably tell

Thanks,

Leon

[jbleroux (Jeremy)]

https://screencast-o-matic.com/watch/crehFlVcV8T

this covered two of your issues.
This will take care of the link not showing up

you have to give your container a position to relative so things inside can be positioned properly. Then if you use flex on the link block and center align and justify center it will place your image in the center of the link.

Hope this helps.

[jbleroux (Jeremy)]

that slight scroll to the right was because you had scroll overflow set to scroll on body. For the most part it is good practice to not set margins or any of that kind of stuff on the body. BUt apply it to the divs or sections nested inside. If you take scroll off the body you won’t have any more side scrolling at all.

[Levans]

Thank you so much! Amazing level of help and also so quick to reply. I really wasn’t expecting this!
I’ve just watched your video and implemented each of the changes.
The layout issues on the mobile site are now completely fixed! They’re mostly fixed on the desktop site but I’m sure your suggestion re: using grid will fix them completely, so I’m going to make a copy of the site and then rebuild it using grid.

The issue with the top-level images not displaying also seems to be a step closer to being fixed, but for some reason you have to tap/click on the link (which reloads the site, as the link boxes all just currently point back at the site itself for testing purposes) to get them to display. Otherwise they’re not there when the site loads. But when they do load, they look perfect thanks to your suggestions on positioning so that’s a big step forward.

I’ve tried it on 3 different browsers and they’re all the same. Do you know why this could be? Is this something to do with how I’ve structured/layered the links and images?

[jbleroux (Jeremy)]

Oh okay I see the link www.iconiarecords.com is going to an http not an https:// when you click it again it loads the https://www.iconiarecords.com my guess is your default domain in settings is not set correctly. Set a default domain | Webflow University

[Levans]

Oh yeah! Well spotted! So is that a security thing? Is there any way to force it to always load the https?

[jbleroux (Jeremy)]

yeah follow the instructions for the default domain. webflow has SSL enabled by default so it shouldn’t be an issue. And yeah must be a security block thing. Also you don’t need to redo the site to do grid. grids can be place in any div, section , though best practice would be to create a footer section, put a div and set that div to grid.

[Levans]

Sorry, your edit popped up just as I replied. I’ll check that out.

I really owe you a beer/coffee/whatever you like to drink! This has really helped me out. One final, hopefully simple, question if you have time, but this is just a nice-to-have so no worries if not.
I’ve added a subtle opacity and scale change to the bottom text links so that they grow and darken slightly on mouse hover, but when I apply the same settings to the social media icons nothing happens, even though technically it’s just another font.
Have you ever seen this before?

[jbleroux (Jeremy)]

don’t know why that isn’t working maybe with someway font icons work, but it works if you apply it to the icon div instead.

[Levans]

I’ll give that a try then.

Thanks so much for all your help!