Question 415281 in Html Question posted in
Some basic documentation can be found here.

Html – I have an image banner I'm trying to center on desktop and fill the screen on mobile

I have a banner that I’d like to float in the middle of the page on desktop and fill the screen on mobile.

Here’s my CSS for media (set up by someone else)

}
@media(max-width:100%) {
    height: auto;
  img#image-6441-60781 {
    padding-left: 0px;
    padding-right: 0px;
  }
}
@media(max-width:100%) {
    height: auto;
  .wp-block-image img {
    width: auto !important;
    height: auto !important;
}

And here’s the HTML I’m trying on the wordpress page (with html/source made into dummy text):

<figure style="max-width:450px;" class="wp-caption aligncenter"><a href="www.testlink.com">
<img alt="Gift Guide" src="123456.png">
</a>
</figure>

I’ve tried other things I’ve seen on this forum and they haven’t worked.

Tags:

2

Answers


  1. 0

    The media queries you’re using will target every device.

    You can refer following break-points to target different devices and apply css accordingly.

    @media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

    You can also try something following.

    * {
  padding: 0;
  margin: 0;
}

.wp-caption {
  height: 200px;
  max-width: 100%;
  object-fit: cover;
  overflow: hidden;
  border: 2px solid blue;
  margin: auto;
}

@media (min-width:480px)  { 
  .wp-caption {
    margin: 0;
    padding: 0;
    height: 300px;
    max-width: 450px;
    object-fit: cover;
    border: 2px solid green;
    overflow: hidden;
  }
}
@media (min-width:600px)  {
  .wp-caption {
    height: 400px;
    max-width: 550px;
    object-fit: cover;
    overflow: hidden;
    border: 2px solid red;
  }
}
    <figure class="wp-caption aligncenter">
  <a href="www.testlink.com">
    <img alt="Gift Guide" src="https://images.pexels.com/photos/2486168/pexels-photo-2486168.jpeg">
  </a>
</figure>
    Login or Signup to reply.
  2. 0

    You can solve this without media-queries. Those add unnecessary complexity in this case.

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
    <figure class="wp-caption aligncenter">
    <a href="www.testlink.com">
      <img alt="Gift Guide" src="https://placehold.co/600x400" width="600" height="400" >
    </a>
</figure>

    It’s always a good idea to include the height and with attributes on your img-tag in the html.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search