-1

I am a beginner when it come to using html code along with css code. I have design a webpage with template that came with the software for an internet radio station. My webpage is not browser friendly since I have not done any css coding, really don't know where to ever start the css code. I understand barely enough of html coding to get the page up and running.

The issue right now as stated in the problem is that I can't get the station image to center on iPhones, tablets, etc. On all of the devices, the image is on the left. On desktops the image is centered. Can anyone help are point me in the right direction for this issue?

Here is my html code for the image:

<div id="logo">
  <div style="text-align: center;">
    <img src="https://www.thesourcesmoothjazzradio.com/images/TheSourcelogo.png" width="1020" height="175"" alt=""/>
  </div>

What css code would I need or would need code for a browser types to be placed in the <header> of the webpage?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
TheSource
  • 1
  • 1

1 Answers1

0

If you set your image container to use flex, and set its justify-content rule to center you can then adjust the width to 100%. If the banner is stretched too big on desktop and you only want it the actual image size swap width for max-width instead.

.logo { display: flex; justify-content: center; }
.logo img { height: auto; width: 100%; }  
<div class="logo">
  <img src="https://www.thesourcesmoothjazzradio.com/images/TheSourcelogo.png" alt="logo" />
</div>
Andy
  • 61,948
  • 13
  • 68
  • 95