Streaming live at 10am (PST)

Two minor problems on nearly completed site


#1

Hi, I am having some issues with “product” section on a home page ( that area below blog posts where images of olive oil are)… when in smartphone view, then text goes outside of the container :frowning: What is the best way to fix that? I tried to remove the images so the text has enough space but then image also disappears in desktop and tablet view… Any better layout suggestions maybe??

Besides that there is a problem with footer section, also in smartphone view… I would like if elements somehow are one bellow other and aligned center, not like now… logo on the left, contact in the middle and the links on the right…

I would greatelly appreciate some advice since I have tried and tried to fix it myself, but I guess I hit the wall…
And last thing. How is site overall?? First project so I would gladly hear any sugesstions. :slight_smile: Thanks
https://preview.webflow.com/preview/olivum-kobas-v2?preview=dc9e421feedc74378bfd7d87b211073b


#2

I’m unable to view your site now as I’m on mobile, but the most common cause for this is you have set a fixed width for an element/s that are wider than the page width.


#3

Hi @74ecrivain,

Try using ‘auto’ on elements that contain other elements - they should then expand as the content inside needs them to. @Waldo helped me some time ago with a similar query.

Re: your footer, i’ve just had a look, and seems like all you need to do is go into mobile view, click on the logo and go to the ‘typography’ section and choose the ‘centre’ option (currently left). Same with the text blocks, centre those (currently right aligned). Give them a little padding/margin for spacing and it’s sorted.
(Tip: changing something in desktop view cascades down to other views, but make a layout change in say mobile and it stays just on mobile - doesn’t cascade up to desktop)

Nice site, sunny and bright!

Stu


#4

Hi @74ecrivain - I agree! sunny and bright! I really like the photo and colours in the footer - nice… :smile: - I would suggest running all your photos through tinypng.com (or other image compression website) to fully optimize the file sizes. As you have a blog, adding more and more unoptimized images might make the Designer (and the site) a bit sluggish and slow to load in the future. Also make the images actual size (i.e. your wine bottle images are 670px x 670px but you have ‘Image is HiDPI’ ticked as 195px - If your images are 195px when ‘Image is HiDPI’ is ticked, the actual size should be 390px x 390px). Lastly, you have Shutterstock watermarks on your main image! Just some helpful suggestions, as requested, I hope! Good luck with the site! Regards Kai :smile:


#5

Just seen your project

For mobile only:

  • Section with class Product Section has a fixed height. Set it to auto.

  • Container with class Container Product has a fixed height. Set it to auto.

  • Product with class Product Massageoil has a fixed height. Set it to auto. Perhaps you might also want to change the Flex Layout of this to “Vertical”.

For mobile only:

  • Set Logo Div text-align to “center”

  • Set Div Block 7 text-align to “center”


#6

This topic was automatically closed after 60 days. New replies are no longer allowed.