Styling a slide show


please see

ok, a couple things

desktop, i really tried, put in the effort… cannot center the slide show images in the container :frowning:

small screen, same issue

what i am after is

in terms of size and ceneter on large screens and the media query i made for small screens…

please give it a go to see what i am talking about :slight_smile:

is there hope?

i have a problem and need your help

please pass on the proper code and an explanation of how you got these images to work, i am genuinely interested in knowing why, knowing what my problem is and how you fixed it


You have to be careful with styles applied on a block basis. You have styles for all images inside a container.


.container img {
    height: auto;
    max-width: 65%;
    display: block;
    margin-left: 1.5rem;
    margin-right: 1rem;
    width: 35%;

However your slideshow image is also inside the container and will automatically get all those rules so you will need to over-ride them like this.

.mySlides img{
margin:1rem auto;

Although it is often neater to style all certain elements by virtue of their container (i.e. .container img) that does mean that if you have other images in that container then you will need to over-ride the existing styles.

That’s why it may be better that instead of saying .container img {styles etc...} you instead simply add a common class to those images and use that class. e.g. .main-img {styles etc...} All you need to do is then add that class to the main images that you want to have that style. When you add a new image that doesn’t need those styles then you will not have to undo the previous styles but just apply the styles you need.

You need to take tight control of your code and understand the implications of the rules you apply. It may be that in one section you have hundreds of images you want styled the same and then to save hundreds of classes on the image you could add an identifier class to the container instead for that section.


<div class="container main-section">

Then you could style those images with .main-section img (styles etc...)

In other containers you don’t have that class and images are left unstyled.

<div class="container">

In the end its just a matter of taking control and understanding the reach of the styles you apply.


my mySlides img

and my amenities img

are not in sync

trying to fix this, i coded

    height: auto; 
  width: 85%;

  display: block;
margin-left: auto;
margin-right: auto;
padding-left: 0;
border: 1px solid #fff;

for both amenities img and mySlides img

this is my amenities code, which works fine

i then tried

.mySlides img{
  margin:1rem auto;

note here: my problem maybe solved if your width was smaller than 90%. 90% is far too large :frowning:

when i adjust the width to 70% yes its smaller however there is more sapce on either side of the image as the viewport gets smaller NOT like that in amenities img

it works well , but is not in uniform with amenities img
i spent time trying to figure this out, i now ask for your help

my appologies if this has been discussed :frowning:

thanks for helping me! and thanks for being cool about it!

You seem to be comparing chalk and cheese? :slight_smile:

The amenities images are inside .container but the slideshow is not. You can’t really match up 2 disparate things easily.

I suggest you put the container class on the slideshow parent and then set the slideshow image to 85% and it will pretty much look the same as the amenities page.


<div class="container container-4">
        <!-- slide show start -->
        <div class="slideshow-container">
.mySlides img {
    max-width: none;
    width: 85%;
    height: auto;
    margin: 1rem auto;
    border-radius: 1rem;

It will then look like this:

You can add a white border and remove the border-radius as required.

ok, please see

at slide 7 the image drops… and more drops as you continue the slideshow

i really tried here :slight_smile:

i took your advice and created a .main img

honestly do not know where my problem is

i re-read your posts here

i also noticed the border radius changes at slide 7

its all in the same contianer so i dont see what my problem is there

if you addressed this already, i apologize… oubviously i did not follow… so
please re-expalin it in a diferent way :slight_smile:

i have a problem, looking for some help :slight_smile:

thank you!

Remove the breaks in the html that you put after the closing tag of .mySlides from about the 4th one onwards.

Never use breaks just to make space as that’s what css is for, Breaks are used to break lines of text such as in a poem or address or for a mid paragraph effect. Breaks are never used just to to make space between elements..

1 Like



i tried my best, problem solving

i am after having the caption “Play Ground” for example on the lower part of that image

intetesting, in VS Code its flawless… my code is good and looks as desired…
i publish it and the caption is wonky

to be clear, i really tried before posting this, oubviously i am still a learner :frowning:

its time i need help

is flexbox or css grid appropriate?

what would that look like?

many thanks!

You need to set a stacking context for the absolutely placed caption. That means placing position:relative on the slide so that you place the absolute element in relation to the slide. This is basic css and we have done thios before so try and remember this point for the future :slight_smile:

I would do something like this:


.text {
    color: #f2f2f2;
    font-size: 20px;
    margin: 0 auto;
    position: absolute;
    bottom: 3rem;
    width: 80%;
    text-align: center;
    font-family: "Lugrasimo", cursive;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 2.0);

first, THANK YOU!


that clicks a little :slight_smile:

will do!

thanks for both the code, most apperciated!, and explaining your code

this is something useful i can use in the future :slight_smile:

tell me what does


i dont know, but want to know!

also, i like the backgound of the text… well done

easier to read, yes :slight_smile:

how did you get


to NOT fill 100% of the sreen… there is a little gap (wrong word?) on either side

i tried playing with the style.css… could not figure that out


The image in your slideshow was 85% wide so I set the caption to only 80% wide which when centred with margin:auto gives the small gap each side.

That’s answered in the first quote of your post. :slight_smile:

Position:relative controls the point at which any child absolute elements use as their starting point. In css positioned elements will use their nearest positioned ancestor as the starting point for their absolute children. If no ancestor exists then the starting point is the root element which is the top left corner of the body element.

You might find it helpful to study this explanation of position:.

1 Like