• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Media Query

Lance

New Coder
Code:
<h3 style="text-align: center; margin-left: 100px; padding-top: 30px;">Latest Posts</h3>
<div class="a2c" style="background-color:black; margin: 40px 40px 80px 100px; width: 400px; height: 480px;">
    <div id="image" style="margin-top: 20px;">
      <a href="test.html">
      <img src="images/fix.jpg" style="width: 390px; height: 250px; display: flex; left: 0px;">
      </a>
    </div>
    <h3 style="text-align: center; margin-top: 20px;"><a href=test.html> Sample Text</h3></a>
    <p style="font-size: 15px; margin-top: 20px; margin-left: 10px; margin-right: 5px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</div>
</div>


I want to make it so when I view it on mobile, the container fits the screen of a phone. Would I have to redo this with flexbox? Want it to be something like this.
 

Attachments

  • tststs.png
    tststs.png
    16.7 KB · Views: 2

LTomy

Active Coder
Staff Team
Guardian
The following applies the styles inside the braces only if the screen is at least 800px:
CSS:
@media only screen and (min-width: 800px)
{
}
You can use that to apply different styles to small/big screens (Phones vs computers).

Make sure you have the following line in the <head> of your HTML:
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">
 
Top