Home/ Questions/Q 7841977
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T16:12:59+00:00

I’ve got a question about html and css (PURE html and css – no

  • 0

I’ve got a question about html and css (PURE html and css – no JavaScript or JQuery)

I’ve got 2 columns on my page (first – width:35% (page), second – width: 65% (page)). There is an image in the first column – 300px x 300px. And, I’m changing size of my page:

  • When the first column is wider than 300px – the image should be 300px x 300px
  • When the first column is wider than 100px and narrower than 300px – the image should be 100px x 100px
    -When the first column is narrower then 100px – the image should disappear.

It is very easy using JavaScript, but I have to do it only in HTML + CSS.

Does someone know how to do it?

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can do this using CSS3 Media Queries, however this of course is NOT supported by all browsers (that’s just a given):

    EXAMPLE:
    The following CSS will apply if the viewing area is smaller than 600px.

    @media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

    Reference:
    http://webdesignerwall.com/tutorials/css3-media-queries

    • 0