Skip to content
OverviewSolutions
8
Comments
13

Munsif Ali

@Munsif-AliDistrict Swabi KP, Pakistan200 points

Flutter developer. Photographer. Videographer. Java. C++. Dart.

I’m currently learning...

Web Development. Data Structure and Algorithms.

Latest solutions

View more solutions

Latest comments

  • Munsif Ali•200
    @Munsif-Ali

    congratulations on your solution i would give some suggestions on your solution As per web accessibility guidelines, all non-text content such as images, videos, and audio must have alternative text that describes the content's purpose or function.

    In the case of the <object> element with no visible content, it is recommended to provide an alternative text using the <object> element's title attribute or a nested <img> element with its alt attribute. Here is an example:

    <object data="/assets/images/icon-visual.svg" type="" title="Icon Visual"></object>

    <object data="/assets/images/icon-visual.svg" type="">
  <img src="/assets/images/icon-visual.svg" alt="Icon Visual">
</object>

    By providing an appropriate alternative text, users who use assistive technologies like screen readers can understand the purpose or function of the non-text content.

    Marked as helpful
  • Munsif Ali•200
    @Munsif-Ali

    there is a little gap in the main card and the image borders at the bottom give the image height 100% to take the full height on the parent like this:

    img{
height: 100%;
}

    and for image use picture tag in html

     <picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

    in that you can specify different images source according to the width you can read more about here about picture tag

    Marked as helpful
  • Munsif Ali•200
    @Munsif-Ali

    although your design is looking good but you that have unnecessary scrolling in it which i think is due to

    .container{
height:150vh;
}

    this code is giving 150% of the view height to the container that is causing the scroll in your design

  • Munsif Ali•200
    @Munsif-Ali

    although your design is looking good i would give you one suggestion that is your repository structure is not looking good i mean create a separate folder for images and place all the images in that folder and create a folder for CSS and place the CSS files in that folder

  • Munsif Ali•200
    @Munsif-Ali

    In HTML, images should always include alternative text, also known as "alt text," to provide a textual description of the image for users who cannot see the image, such as those who use screen readers or have images turned off in their browser.

    If you are encountering an error message stating that images must have alternate text, it means that you have not included the required "alt" attribute in the image tag. To fix the error, simply add the alt attribute to your image tag and provide a brief but descriptive text that accurately describes the content and purpose of the image.

    Here's an example of an image tag with the alt

    <img src="example.jpg" alt="A red apple on a white background">

    In this example, the alt text describes what the image depicts, allowing users who cannot see the image to understand its content.

  • Munsif Ali•200
    @Munsif-Ali

    It look like you have given the wrong path of the image. To give a relative image source (src) in HTML, you can specify the image's location relative to the HTML file's location. Here are some examples:

    • If the image is in the same directory as the HTML file:
    <img src="image.jpg" alt="Image description">
    • If the image is in a subdirectory called "images" in the same directory as the HTML file:
    <img src="images/image.jpg" alt="Image description">
    • If the image is in a parent directory called "images" relative to the HTML file:
    <img src="../images/image.jpg" alt="Image description">

    In the second example, the "../" notation indicates that the file is located one directory level above the current directory. In the third example, it is located two levels above.

    Note that the actual path may differ depending on your file structure, so make sure to adjust the relative path accordingly.

    In HTML, images should always include alternative text, also known as "alt text," to provide a textual description of the image for users who cannot see the image, such as those who use screen readers or have images turned off in their browser.

    If you are encountering an error message stating that images must have alternate text, it means that you have not included the required "alt" attribute in the image tag. To fix the error, simply add the alt attribute to your image tag and provide a brief but descriptive text that accurately describes the content and purpose of the image.

    Here's an example of an image tag with the alt attribute:

    <img src="example.jpg" alt="A red apple on a white background">

    In this example, the alt text describes what the image depicts, allowing users who cannot see the image to understand its content.

    Marked as helpful
View more comments