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
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
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.
e.g.
<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.
note here: my problem maybe solved if your width was smaller than 90%. 90% is far too large
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
thanks for helping me! and thanks for being cool about it!
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.
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..
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
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.
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.
