Mulitiple issues with responsiveness

Design help General
1

Just started using Webflow at the end of last week and I’m having a few issues with the responsiveness of my first page. Here are the issues I’m having, any ideas or solutions would be greatly appreciated.

  1. 1920px and up breakpoint: The second case study text is jammed up against the image. I have an HTML embed targeting the even blocks but can’t seem to find the solution.

  2. Tablet & Mobile Landscape and Portrait: I tried to change the alignment of the collection items (in a flexbox) so that they stack but only one collection item adapted the changes.

  3. Mobile portrait breakpoint: The copyright and contact info at the iPhone SE breakpoint; I want it to be 4 separate lines, I tried changing it from a grid to a flexbox but I can’t seem to get it to work.

Here is my site Read-Only: https://preview.webflow.com/preview/test-c2db58?utm_medium=preview_link&utm_source=designer&utm_content=test-c2db58&preview=485953af30274a760b016e62303a1a12&workflow=preview

2

hi @Keeshaun

  1. your container have max width 1200px, you are using 1fr for both columns, the font size is too big and doesn’t fit because is long. That’s why this part (text area) expand to take space that need to fit text and image get rest of free space so it shrinks.
  2. collection item => display:block
  3. div block 4 => display: flex flex-direction: row OR just display:block

As I have mentioned in your previous request any CSS basics course will be beneficial to you. :wink:

1 Like