I am having trouble editing this page on my company’s website to be responsive in different sizes, I have gone through and made all the edits to the smaller display settings at the top of the toolbar, but when I publish the site to the staging site, my coworker sees the site as messed up (text on top of each other, misalignment) but I see it on my computer fine. I know it has something to do with different displays in desktop but I am not sure how to fix this.
Overall, I recommend going through most elements and remove the margin settings, unless it’s applied to a graphic element like you have on the green blob. Having margin settings applied to content elements will only cause issue with the responsive layouts. Better to use padding when content related.
Revising at the Base view:
• Section11 has a width of 1070 on all devices. Change this to 100%.
• Inside of Section11 is “Container 2”. This has a width of 1340 on all devices. Change this to 100%
• Collection List Wrapper 3 - Reset the margin settings
• Collection List 2 - Reset the margin settings
• Collection Item 5 - Set width to 25%
Revising on Tablet view:
Go through the above elements and remove margins
• Change “Collection Item 5” to a width of 33.33% (or 50%, whatever you’d like the view to display)