Styling for iPhone 12 mini

Kcaden20 / critical-code-cookbook

This is the official repository for the Critical Code Cookbook Website

2 stars 0 forks source link

Styling for iPhone 12 mini #4

Closed xinemata closed 2 years ago

xinemata commented 2 years ago

A couple spacing issues were observed on iPhone 12 mini (DuckDuckGo and safari):

the two toggle buttons in the menu bar & at the upper right corner seem vertically misaligned to me
on homepage, the "Critical Coding Cookbook" bubble is covered by the top menu bar when visitors land on the homepage
on the contribution pages, when an ordered list is created, the text block expands fills up the entire device width. If there's a way to adjust the margin there that would be great

Kcaden20 commented 2 years ago

I don't have a mini to look at this on but these changes were made in responsive design mode and tested to 300px. Documentation of the look on my end below.

Please test when I push the latest changes. Screen Shot 2022-06-24 at 3 11 11 PM

xinemata commented 2 years ago

Under Joana and Renick's entry, the "steps" block isn't contained by device width for some reason.

xinemata commented 2 years ago

Consider making the call out boxes width flushes with paragraph width? 3 to 4 words per paragraph feels a little short to me.

xinemata commented 2 years ago

Similar issue with Noam's entry. The block quotes feel a little narrow

xinemata commented 2 years ago

This image on Noam's entry isn't contained by device width for some reason.

xinemata commented 2 years ago

Is it possible to increase the size of the entry thumb titles?

And maybe differentiate the sizes of h4 and h5 more for legibility?

Source: Kemi's entry

Kcaden20 commented 2 years ago

Joanna and Renick’s was because the urls were really long. All URLS in a code block will now break to avoid this.

Callouts and Blockquotes now go to the edge.

Can’t recreate the Noam issue. It is working on my phone and on the smallest responsive design phone size.

I’ve increased the size of H4, H5 and generally the size of the text on mobile. I’m hesitant to change the size of the smaller sizes as it on a scale with the larger sizes, meaning I’ll have to size those up and it will cause the issues we were dealing with earlier.

xinemata commented 2 years ago

Callouts & blockquotes are looking great on my end! Joanna & Renick's entry is working too.

You have somehow fixed Noam's image issue. And the thumbnail titles are looking much clearer now. I'd consider this closed.