I have created a webpage similar to a news page, and it functions perfectly on a 16:9 display. However, it faces difficulties when viewed on tabs with smaller widths. I am considering three solutions to address this issue:
- Adjusting the margin that holds the div away from the left side of the tab to decrease in width exponentially.
- Making the margin disappear under a certain width.
- Exploring alternatives to using margins to keep the div away from the side of the tab, and making adjustments for smaller tab widths.
While I have seen other pages successfully implement these solutions, I have been unable to find resources or examples online. I have not attempted any changes due to my limited knowledge in solving this particular problem. Here is an example of the code I have:
<html>
<body>
<div style= "width:60%; margin-left:20%;">
<p style="
margin:0px;
word-wrap:break-word;
margin-top:0px;">Praesent semper, leo ac scelerisque
volutpat, massa ex volutpat dui, in
suscipit mauris neque auctor quam.
Vestibulum vel finibus elit.</p>
</div>
</body>
</html>To illustrate the issue, when the page is scaled down to around 1000px width, the excessive empty space becomes evident. Thus, I seek to eliminate the margin entirely and set the width to 100%. Additionally, I want to explore options beyond using margins.
In one attempt, I tried the following code:
<html>
<body>
<div style= "width:60%; margin: 0 auto; min-width:500px">
<p style="
margin:0px;
word-wrap:break-word;
margin-top:0px;">Praesent semper, leo ac scelerisque
volutpat, massa ex volutpat dui, in
suscipit mauris neque auctor quam.
Vestibulum vel finibus elit.</p>
</div>
</body>
</html>
Despite some improvements like removing margins and hiding empty parts under a specific threshold, this method still requires horizontal scrolling on smaller screens.
Eventually, I received assistance from various individuals across different platforms and successfully resolved the issue using flexbox. I am grateful for the helpful input provided.