The Low Down - Why the Useful Portion of the Page Isn't Maximized

https://www.dukelearntoprogram.com/course2/doc/javadoc/index.html?course=2

Go there and, if you have OCD like me, you ask this question :


And the response 

(takeaways : CTRL-SHIFT-C to point and select an element. And you get the element.style {} standing by to let you tweak it! Also, height:75vh; in CSS gives you 75% of the viewport. Thank you Upwork.


How to open Chrome dev. Tool :-  CTRL-SHIFT-C

How to tweak CSS and change CSS of the page ?

● In the dev tool in the Elements window there is a tab (or section ) named Styles.

● You can add new css rules and remove the old rules i this section

(NOTE: these changes are temporary and will be removed after the page is reloaded)


How to target the section whose style you want to change?

● There is a small arrow key in the top left of the dev. tool.  

● Select that tool or just press CTRL-SHIFT-C again.

● Now hover over to the section you want to modify and click on it. 

● Make sure to select the outermost container of the part whom you want to change

    ○ For example, her,e I targeted the whole footer as I want the whole footer to be at bottom.

How to modify styles?

● You can add new CSS rules in element.style window. Just click in the section and new line will appear to add new CSS rules 


● Placing footer to stick at bottom:-

○ If you have prior knowledge of CSS then you can implement the design yourself.

○ Otherwise the best way is to Google (css to make footer stick to bottom)

○ However i am pasting the code here (Copy paste it)

position: fixed;

left: 0;

bottom: 0;

width: 100%;

● Increasing height of the content in the middle:-

    ○ Press  CTRL+SHIFT+C again.

    ○ Hover and click somewhere to the container that have the readable content. 



    ○ In  element.style section add the height that suits your monitor here i am going to use

height: 650px;      ← you can copy paste it and play around with the value that suits your monitor

The problem

The developer has employed a suboptimal approach in writing CSS, resulting in an unresponsive webpage. Specifically, the developer has assigned a fixed height value to the container, making it incapable of accommodating varying screen sizes, including both mobile and larger monitors.

How to avoid this kind of problem:-

Using relative units for sizing such as percentage, em, or rem. This allows the container to scale proportionally with the size of the screen, ensuring that the content remains visible and accessible on all devices.

Using media queries which allow to specify different CSS styles for different screen sizes. 

Using CSS grid and flexbox that allow developers to create flexible and responsive designs. By using these tools, we can create dynamic layouts that adapt to different screen sizes and device types, making it easier to ensure that content remains accessible on all devices.



Comments

Post a Comment

Popular posts from this blog

How Should You Put Your Text in a Box?

Image
Per the great bloggers, it helps your cause to put your message in a box But, how? I mean, easily? :) Do it once (use these steps, which I got from chatGPT) and, once you have a blog that you can look at in edit mode, you can always cut and paste. Go into Edit HTML mode. If necessary, use a tool like freeformatter.com to make the HTML that your blogging platform creates for you readable (with indentation, etc). Now, locate the text you want to enclose in a box and surround it with : <div style="border: 2px solid COLOR_OF_CHOICE; padding: 10px;"><p><span style="font-family: FONT_OF_CHOICE;"> and </span></p> </div> NOTE : With very little text, you may benefit from adding : display: inline-block; max-width: max-content; //within the style setting For chatGPT: (click to select) When I say 'FORMAT,COLOR,WIDTH,PAD:', followed by some text, please generate HTML tags that ...
Read more

Tricks : Getting Image URL When Page Doesn't Want You To!

This one for example. Why? A good reason I guess... Thankfully , what one can invent, another can discover as Dr. Doyle puts it.. Open Chrome Developer Tools (Right-click > Inspect) Expose the Application menu (might need the right pointing chevron >> ) This gives you a new left panel that has menus like Manifest, Storage, Cache, etc. Scroll down and use the expansion arrow under Frames Then expand Images If, after this you don't k how to grab the URL, hey, McD is hiring 😊
Read more

A Web Interface to Try Dual Key Caesar Cipher Encryption and Decryption

https://frontendkaizen.blogspot.com/2022/03/dual-key-caesar-cipher.html Give it a try. If it looks less pretty than it could, it's because I don't know how to hack Blogger well enough 😊 If you Google "decode caesar cipher", you get to : https://www.dcode.fr/caesar-cipher https://www.boxentriq.com/code-breaking/caesar-cipher https://www.thewordfinder.com/caesar-cipher-solver/ All of which are okay for a single key - for encoding. One of them probably does true solving in the sense of finding the best candidate after brute force searching. But none does true code-breaking by looking at character frequency (unless they do😊). But what about two keys?!! There wasn't anything online (for decrypting that is. The dcode site does do encryption, but is really hard to use) Until now :) Give it a try :  https://frontendkaizen.blogspot.com/2022/03/dual-key-caesar-cipher.html Kudos to Tamer Abd Alrazaq for porting the java to javascript and getting it to work in the blink of ...
Read more