Resolutions/responsive issue. Help Please :D

Hi all

quick one. this is only my second webflow site.

ive exported my site @ http://accessfloorsupplies.co.uk/ (live)

which is all working on my desktop and most other widescreen (1080p) resolutions (or so it seems).

the problem seems to be on lower resolutions and smaller devices where i get text overlaps etc even though on the design view everything looks pretty acceptable.

heres a project link:

https://webflow.com/design/raised-access-flooring-supplies?preview=d664fea43fdc7a1b9f65af72c7eddff3

am i right in assuming where ive gone wrong is due to the fact im not working within the grid overlay? could that be why?

if anyone could help id be very VERY grateful, ive struggled with this far too long.

thanks guys :smile:

James

are you talking about the SLIDER ?

You have FIXED-WIDTH that doesn’t change between devices.

And your FONT doesn’t change either.

Video: http://quick.as/xpwasoYe

Also - why are you using a SLIDER ? you only have 1 slide.

And… why are you using an IMAGE that contains TEXT…

  • instead of just using TEXT inside a DIV ?

The IMAGE will not resize properly when you move to lower resolution devices.

The HEIGHT of the IMAGE will mess up.

not specifically the slider, thats not too much of a problem, its more text overlapping on the pages, its easier to see what i mean when you open the site on a tablet or a lower resolution screen. and in regard to the slider, im waiting on them for some more images to finish the slider off haha ^^ and the image is a temp one i made quickly.

ok - that makes sense.

However… I still think your SLIDER is creating an issue.

You have a FIXED-WIDTH on it.

When you change to small device - the TEXT distorts and some of the options disappear from the screen.

If you delete the SLIDER… the problem seems to go away.

Theres also something strange about the behavior of your NAVBAR as well.

The contact, properfooter, and calltoarms areas might be better served inside a ROW.

ahh ok we might be onto something here, i appreciate your help greatly. do you think i should remove the slider then re-add it prehaps leaving the settings on auto?

so you think potentially the slider having the fixed width could be the reason why the text begins to overlap on the smaller devices?

what do you mean about the other sections? can you elaborate?

thanks :slight_smile:

I’d removing the FIXED-WIDTH on the SLIDER and AUTO-WIDTH.

For me… I tend to use SECTIONs to group.

Then… you use the settings options to change the SECTIONs (DIVs) into actual HTML-5 SECTIONS.

I’d have a SECTION for the NAVBAR, another for the HERO SLIDER, another for your “Panels / Finishes / etc” area ---- which seems to be more of a Services or Product ??? , another for the Address area, and lastly another for bottom FOOTER (Delivery within 48 hours / Call If You Can’t… / etc)

So basically… using my naming convention - and “my style” (obviously yours can be different - do what’s comfortable for you).

sec_Nav

  • div_Nav
    – div_Logo
    – div_NavOptions
    — row (6 columns - Home / Panels / Finishes / etc)

sec_Hero

  • sld_Slider

sec_Service

  • div_Service
    – row (5 columns)… you might encounter an issue here… b/c of the odd number. Webflow tends to work from even numbers.

sec_ContactUs (which is your properfooter)

  • row (2 columns)

sec_Footer

  • row (3 columns)
1 Like