0

I have used both HTML and CSS code to center a top of page banner. At 600 pixels, it is too wide for mobile phones, so I also substitute a 310px image for mobile phone viewports. After modifying jmore009's code, I got it down to the following that works and validates. But I had to use centering code in both the HTML and CSS. Is that the correct way to center it?

HTML 4.01 code:

<div class="centered">
    <img src="images/short_banner.gif" alt="MYSITE.COM" class="image2">
    <img src="images/long_banner.gif" alt="MYSITE.COM" class="image1">
</div>

CSS 3.0 code:

.image2{
   display: none;
}
@media only screen and (max-width: 600px)
   {
   .image1 {
         display: none;
       }
    .image2 {
         display: block;margin:0 auto;
       }
    }

div.centered {
    margin: 0 auto;
    text-align: center;
}

I could not get the short banner to center without using a DIV. There must be a better way to center both the swapped banner images without using centering in both HTML and CSS code.

Charax
  • 31
  • 2
  • Ever tried using `` and ``. Life can be so easy... – Rene van der Lende Jun 16 '19 at 11:55
  • Probably need to check proper syntax, but this works all the time. – Rene van der Lende Jun 16 '19 at 11:58
  • Thanks for the fast response, Rene. But I am not a pro so please show me the CSS 3 code in your smartphone.css and other-devices.css files that will produce the centered banners. Cheers. – Charax Jun 16 '19 at 18:10
  • I have no specific CSS for you, but in `smartphone.css` you put, well, smartphone image handling, in the other stuff for larger devices. The `media` on the `link` decides what CSS gets retrieved from the server – Rene van der Lende Jun 16 '19 at 21:02

0 Answers0