1

Here is the site: http://sdgsdgsdgsdg.atwebpages.com/

Works as desired on Desktop browsers at any scale. Works on Mobile as well if in Landscape mode.

However, when using Portrait mode on my iPhone SE, the first carousel image is off center in Chrome.

Here is screenshot:

enter image description here

I've tried adding a style of text-align:center to only that particular image's div in the carousel and it didnt work.

Edit: As suggested that a previous answer should solve it, I used the code in the answer which was adding to my css: .carousel-inner > .item > img { margin: 0 auto; }

and it still didn't work.

Any ideas?

Kian
  • 389
  • 1
  • 2
  • 15
  • Possible duplicate of [Bootstrap Carousel image doesn't align properly](https://stackoverflow.com/questions/10591422/bootstrap-carousel-image-doesnt-align-properly). See @atrepp's answer. – Alexander Aug 13 '17 at 03:19
  • @Alexander that didn't fix it. – Kian Aug 13 '17 at 03:44

2 Answers2

1

you're using this style right now

.unity-logo > img {
    width: auto;
    height: 386px;
    max-height: 386px;
    margin: 0 auto;
}

just override above style in media queries ex.

@media only screen and (max-width:479px){
   .unity-logo > img {
      width:100%;
      height:auto;
    }
}

It should work..

enter image description here

codingsoul
  • 133
  • 12
  • also apply all media queries below your custom style properties so they can override the above styles. – codingsoul Aug 13 '17 at 05:05
  • i forgot to add the class selector in media query when i posted my answer, see the edited media query.. – codingsoul Aug 13 '17 at 05:07
  • That works great. The image is a bit smaller than it was before, but I that's the only downside. I've accepted your answer. Thank you. – Kian Aug 13 '17 at 05:10
  • you can use height in px like you were using before but in that case the image will stretch. – codingsoul Aug 13 '17 at 05:12
0

this is what you need:

@media(max-width:480px){
  .unity-logo > img{
     max-width: 100%;
     height: auto;
    }
}

hope it helps :)

Farbod Ghasemi
  • 97
  • 5
  • I understand the first code snippet. I just need to add parent to the container's class of the image. But the second snippet? Do I need to change media to something else? Because I don't want all my images to be 480px wide. Really not sure what it means. – Kian Aug 13 '17 at 04:29
  • no media queries are for giving different styles to elements deppending on the width of the screen. so `@media(max-width:480px)` means if the device width is below 480px then use these styles. – Farbod Ghasemi Aug 13 '17 at 04:35
  • I tried adding your 2 snippets. Didn't work. Since I'm kind of new to this, I wasnt sure if parent needed a . before it such as .parent so I tried that as well. I also didnt know if i needed to add media to the img's class so I did that as well later. This is the css right now though: https://kianrafiee.github.io/unity/unity.css – Kian Aug 13 '17 at 04:54
  • by parent i meant the element that contains the img, in your case .unity-logo ... i changed my code , try the new one – Farbod Ghasemi Aug 13 '17 at 05:08