Carousel re sizing images


#1

Hi guys, new user here, came from iWeb so skills non existent! I built a site I am happy with but I have a problem with the carousel. It re sizes the images for every transition, which then re positions the rest of the website making it very difficult to read. I set the height of all images to 561 px to try and combat this but it is still a problem when viewing on mobile. Any ideas? The website is www.theravenhotel.com.

Many thanks


#2

@2manyg Welcome :slight_smile:

A few tips for carousels: Prior to starting work in Blocs, first make sure you have all your images (actual image files) sized to the same dimensions lets say 800x400px. Doing this will make the carousel consistent and save you time resizing to get the same heights etc.

The carousel is responsive so it should scale down on smaller devices to take up less room. However, this may be effected if you are giving the images a fixed size using the sidebar controls, these options will apply this size across all breakpoints (devices), which will cause big images on a smaller device.

What you need to set is the Max Height. You do this with a Custom Class added via the Class Manager to target the images in your carousel, so select the carousel give it a class .my-carousel, then add .my-carousel img via the class manager, and edit the class Max Height Value.


#3

Many thanks Nom, I had fixed the files to a fixed height but not a fixed width, all sorted now, cheers!


#4

Hello Norm,
I have the same issue as 2manyg and looking for a solution, I have found this post.

Actually I hardly understand what you advice.

What you need to set is the Max Height. You do this with a Custom Class17 added via the Class Manager8 to target the images in your carousel, so select the carousel give it a class .my-carousel, then add .my-carousel img via the class manager, and edit the class Max Height Value.

To me is not clear why I should add “.my-carousel img” and then edit there Max Height Value.

In particular is not clear to me why “img” and why it is not possible to set Max Height value in the " .my-carousel" class. Last but not least, what is “.my-carousel img”, a sub class of “.my-carousel” or?

Then is this

Thanks for clarifying,
dan


#5

basicly the carousel is made up of different layers it’s not just an object, in reality it’s images stacked together in a container. If you want to style the images, you need to target them, the class applied to a carousel simply effects the container not the actual image content stored within.


#6

Thanks, so “.my-carousel img” is not a sub class or?

Where can these settings, I mean adding a class with the “img” suffix, be found?

Thanks,


#7

Yeah its a bootstrap subclass in a sense, ibut what you are creating is more a selector class. This is the standard way to write code for styling websites. By using your class name (my-carousel) then add a space followed by the img tag. You are targeting the container (my-carousel) and then styling the image child element that resides within that container.

I appreciate you may not know how to code and thats why you purchased Blocs, the truth is you are secretly learning how code works with classes. You don’t write the code but you are using methods used to code.

The image suffix is actual the img tag which is standard web stuff you can learn in any CSS book or website, if you are interested.