And, I’m completely lost with Project Section 2 too, where I want an image to be revealed on hover and the text and yellow line to disappear. Could you help with this too please? Thanks
@shonali are you working on the site at the moment? I keep having things change as I try to record a new video, I wonder if that’s what’s going on?
Sorry Sarah, just saw your message. Yes, I have been working on the site and will stop now. Apologies for the inconvenience.
Now the other problem I have is in mobile portrait, in the Image project section the first image gets skewed out of proportion completely.
Am stopping work now. Thanks
haha, that’s okay, I was just wondering what was going on . Good to know your website wasn’t haunted
Here you go http://somup.com/cqjYFqeTcT . The first interaction you set up seemed to be
Thanks so much, Sarah. This really helped and thanks for your patience!
I still need to get all the other break points and pages set up, so I will do that before I do any interactions.
So a few more questions:
You said to reduce all image sizes to about 750 pixels width. Doesn’t Webflow need larger images for responsive sites and HiDPI images?
Is it a good idea to have so many interactions for the mobile as well? What if I decide to just have a darker colour instead of an image appearing in Project Section 2? Is that possible? That would mean one type of interaction for laptop and tablet and a different interaction for mobile for the same div block.
Sorry, forgot to ask one more question:
- If you look at any of the Work pages in the project, you will see I have large images on these pages too. Should I reduce these to 750 x 500 pixels too?
- I didn’t say ‘all image’ . I did say that for the images on the page I looked at since they are much bigger than they need to be. Sure, webflow can make them smaller but it’s best to start out with a decent size. I tend to pick a size I know the image will never be bigger than. So in this case, a 750 width would be okay. The website would have to be viewed on a wall-sized monitor before it became too small (slightly exaggerating but you get the idea).
- I’d have interactions solely on desktop since there’s no way for people to see the effect on tablet/mobile. You can change this in the interactions panel.
- These images are too big to display at 750 width. You could reduce the image to say 1200px width.
In case you’re not doing this already, use something like tinypng.com to compress your images before you upload them to the website. An appropriate size + weight (using compression) both helps for site speed.
- on your image in mobile portrait, change the display setting on the ‘interaction trigger’ to 'display flex: vertical ’ and the image to ‘width: 100%’
Sarah, thank you so much for helping me out with all of this and helping sort out every little glitch I have.
Will be in touch as this progresses and I have more queries.
Why is it that in the mobile views the project grid goes for a toss? I can’t seem to get it into order, even if I try doing the placement of the grid sections in manual mode.
Same problem with the About page when I go into mobile landscape and portrait view. How do i get this to become a 2 col grid instead of 4 cols (for tablet and desktop) views?
Same problem with the blog posts page. Everytime I use a grid, in the tablet and moble breakpoints there is a problem.
@shonali your grid items don’t span correctly. At least, from looking at the first grid on your homepage. The image spans two columns on the first row. While the text block takes up that first column on the first row as well. So they overlap eachother.
First thing to do to fix this? Get all your elements of the grid in the right order in the navigation panel.
Your element order is off compared to how it’s showing on screen. Left to right, top to bottom, is how they should be displayed.
Second part is, see how many rows you need for your elements. Haven’t got enough? Add them.
Third, make sure each item is in the right cell and spans only the cells it needs to.
On the blog, first, why aren’t you using collections? That should make it way easier. Second, please use flexbox over grid for this layout
Do you mean redesign the whole thing using Flexbox and not Grid? I thought for a responsive site grid would be better?
I guess I need to read up on Collections for the Blog section and then integrate.
Also, since the menu is a symbol I am not able to add a drop-down to the WORK link. Do I need to add the drop down before I convert to a symbol?
Many questions I know but I am a first time user!
I’ll take another look at the site after the weekend . There are cases where flexbox works more intuitively than grid. Either can be responsive so that doesn’t matter. It’s more that they both have their ‘best uses’. Have you seen these videos from the university?
Thanks, looked at videos will rework the home page with flexbox and see how I go.
Collections… another huge learning curve
For now maybe get rid of the grid and use flexbox since these are currently links to outside blog posts. Need help with the dropdown menu.
I don’t know if you will have time to look at this… I redid the home page projects in containers with flex… it’s ok except for mobile portrait view when everything goes for a toss.
Do you want me to take these queries somewhere else, if you’re fed up with my questions? I would totally understand that.
Also is there live help for Webflow? It might be a little easier to have someone take me through this!
@shonali yeah, sorry I didn’t get back to you yesterday. I’m here to help . There’s no live help, I’m afraid. You can hire someone, I don’t take on clients though. Still, super happy to help. Let me take a look and I’ll get back to you. With our time difference, that’s probably going to be tomorrow.
Thanks. Sarah. Appreciate all your help. I managed to sort out the mobile home page view too, but if you have the time do take a look. Everything is pretty much set up now except for the menu and linking of pages. And interactions of course!
@shonali have you been able to fix the dropdown issue? It looks normal to me