Hi Everyone
I'm using the picture element which most of you know as in this example:
The page I'm using it on is basically a front page with only an image and some text below it. The coding is easy in that I don't have to do anything with 'banner', 'header', etc. Here's a quick sketch:
When making a page I usually check it in one of the many websites that shows how a page looks in different sizes and devices. Scaling down everything is in place all the way to phone screen. But when I checked this page it in larger screens up tp 24" then the image slides to the left as shown on the image to the right.
I have the img tag css as:
That usually works for centering at any size but in this instance it doesn't. I also used text-align but nothing likewise.
Does picture element require something different? Should I put everything in a container or wrapper and center that?
Any suggestions appreciated.
Daniel
I'm using the picture element which most of you know as in this example:
Code:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>The page I'm using it on is basically a front page with only an image and some text below it. The coding is easy in that I don't have to do anything with 'banner', 'header', etc. Here's a quick sketch:
When making a page I usually check it in one of the many websites that shows how a page looks in different sizes and devices. Scaling down everything is in place all the way to phone screen. But when I checked this page it in larger screens up tp 24" then the image slides to the left as shown on the image to the right.
I have the img tag css as:
Code:
img {
max-width: 100%;
height: auto;
margin: 1% auto 0 auto;
}That usually works for centering at any size but in this instance it doesn't. I also used text-align but nothing likewise.
Does picture element require something different? Should I put everything in a container or wrapper and center that?
Any suggestions appreciated.
Daniel
