Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Nov 10

Struggling with Responsive Design

Hey everyone, really enjoying designing on Editor X lately and I feel like I've made great headway. That is until I viewed the site on the mobile view. I used grids and stacks to make sure it was responsive... but still doesn't sit right. Then when I make changes on the mobile view, it then messes up the desktop view. What am I doing wrong? Am I missing anything, any tips or tricks, see the page in question below:


https://in-good-company.editorx.io/dsd-atheletic-club/little-athletics

1

Hey!


Thanks for sharing your site. It appears that you have some elements that are larger than the viewport size. The first thing we should take care of is resize those elements to fit in the viewport. We should to through each element and find which one's more than 100% (or maybe offset).


A few problematic elements that I found: - Services widget is 166%

-In the repeater you have images that are 350px, I suggest to set them to 100% instead.

-The Progallery on top of your site has a min-height of 564px, the min height shouldn't be larger than the size of the screen. There may be more elements on your page that are overflowingץ


A few tips to prevent this in the future: -Try to use fluid units for sizing (%, VH, VW)

-Set the section structure first

-Work from the parents to the children (set the container's size and position first)

-Work on 1-2 elements at a time and check each breakpoint before you continue to the next one.


Hope this helped out!

1

Hey Sebi, yes thank you so much! That helped a lot. I think I sorted it now - https://in-good-company.editorx.io/dsd-atheletic-club/little-athletics

Editor X

Design your boldest creations.