Solution using HTML and CSS with Flex and Grid

Community feedback

• 

  efim•390

  @efim

  Posted about 2 years ago

  Hi! I'm not a senior in frontend dev, but wanted to try to figure out your question: "In the mobile view, the text has moved together a bit, what could be the reason or how can this be fixed?"

  What I did is opened your website in Firefox, entered mobile view with "Ctrl + Shift + M" (or Menu -> More Tools -> Mobile Design Mode) and then opened dev tools with F12.

  The "context menu" (right click) on the text and then "inspect element" highlight that element in the dom in the menu, and also allow us to see sized of "body \ padding \ margin"

  I'm putting the screenshots in my repo and will paste links:

  1. this is me inspecting the element in question: screenshot 1
     you can see that putting cursor at the blue inner rectangle (1) - the body gets highlighted at the page (2), but no padding or margin is detected
  2. then I check elements higher in the hierarchy, and finding this one screenshot 2
     setting cursor to (1) purple "padding" place - highlights the area of your webpage that padding takes (2) so, this is the element that results in text getting smushed
  3. then i can also temporarily change the style right in the browser dev tools: screenshot 3
     setting left and right to 1rem removes this smushing

  You'll probably want to have media queries for mobile size that set different paddings for the element. and maybe even not using paddings to make blue background take whole width, but just make it's width 100% or something. Here unfortunately I can't give specific advice, because I've started almost immediately with TailwindCSS and it's a bit different from css

  Hope this helps!

  10

  Marked as helpful