Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Results summary component

Igor 230

@For1207

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I would appreciate it if someone could explain how to adjust the screenshot sizes when working with md-files. I was working with my Readme.md and came across a situation where the screenshot size for mobile devices was much bigger than I wanted, but I couldn't find how to do it in Visual Studio Code.

Thank you!

Community feedback

@marviecephas

Posted

To adjust the screenshot size for .md (Markdown) files, you can use Markdown syntax along with HTML to control the image size. Here's how you can do it:

  • Markdown Image Syntax: Use the standard Markdown image syntax to embed your screenshot:

    ![Alt Text](image-url)
    

    Replace "Alt Text" with a descriptive alternative text for the image, and "image-url" with the URL or file path to your screenshot.

  • HTML <img> Tag: You can also use HTML within your Markdown file to control the image size. To adjust the size, you can set the width and height attributes in pixels or other units:

    <img src="image-url" alt="Alt Text" width="300" height="200">
    

    In this example, the width is set to 300 pixels and the height is set to 200 pixels. Adjust these values as needed.

  • CSS Styling: You can further style your image using CSS if needed. For example, to make the image responsive to the screen size:

    <img src="image-url" alt="Alt Text" style="max-width: 100%;">
    

    This will ensure that the image scales down to fit the available width while maintaining its aspect ratio.

By using these techniques, you can adjust the size of screenshots in your Markdown files to suit your needs. Remember to replace "Alt Text" and "image-url" with appropriate values for your specific case.

Marked as helpful

0

Igor 230

@For1207

Posted

Thank you very much, Marvellous! The HTML variant works best for me. @marviecephas

0

@marviecephas

Posted

You're most welcome, I asked for help too :) @For1207

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord