Topic: Aspect ratio of halfpage carousel layout image

Austin free asked 6 years ago


I am using the halfpage carousel layout and I am confused as to where I can find the aspect ratio for the layout images. My Photoshop edits seem to keep getting cut off. What is the best way to do this? I am using bootstrap material design with October CMS.

Anna Morawska staff answered 6 years ago


Hi there,

you can use nth-of-type css selector. It will look like this:

.carousel-item {
background-repeat: no-repeat;
background-size: cover;
}

.carousel-item:nth-of-type(1) {
background-position: center bottom -300px;
background-image: url(https://partysprings.com/themes/zanor-zanor-mdb-loaded/assets/images/froggers/two_girls_dancing.jpg);
}

.carousel-item:nth-of-type(2) {
....
}

If don't want to, you can instead add !important rule in your media queries:


@media only screen and (max-width: 600px) {
.carousel-item {
background-position: center bottom !important;
}
}

Best,
Ania


Austin free commented 6 years ago

Thanks the nth-of-type selector works great!

Austin free answered 6 years ago


Each carousel-item has a different background-image and background-position though. I can't put this in the style.css as it only styles one carousel item.

Anna Morawska staff answered 6 years ago


Ok, I think I know what is the problem. I've taken a look at your website's code and I noticed that carousel-item has inline-style defined.

<div class=" view hm-black-light" style="background-image: url('https://partysprings.com/themes/zanor-zanor-mdb-loaded/assets/images/froggers/two_girls_dancing.jpg');background-repeat: no-repeat;background-size: cover;background-position: center bottom -300px;">

Inline styles overwrite all rules defined in your external stylesheet ( style.css ). I advise you to move this code

.carousel-item {
background-image: url(https://partysprings.com/themes/zanor-zanor-mdb-loaded/assets/images/froggers/two_girls_dancing.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center bottom -300px;
}

to your style.css ( put it before media queries, and delete inline styles in your html ). It should resolve your problem :)
Best,
Ania


Austin free answered 6 years ago


Ok it doesn't seem to be working, here is my style.css: https://partysprings.com/themes/zanor-zanor-mdb-loaded/assets/css/style.css I think the .carousel-item adjustments could be included in the first "@media only screen and (max-width: 768px) {" but it does not seem to work as implemented right now anyway. Thank you for your help, I must be missing something here.

                    
                      

Anna Morawska staff answered 6 years ago


Hello, yes, in fact, there is a way, check out sth called media queries :) You have to write in your css file ( by default it's "style.css" ) sth like this: @media only screen and (max-width: 600px) { .carousel-item { background-position: center bottom; } } It means that if the browser window is 600px or smaller, the background position will be center bottom ( without -300px ) Let me know if this resolves your problem. Best, Ania

Austin free answered 6 years ago


Ok I managed to reposition the carousel using CSS but it doesn’t seem to look right on mobile. At first I just centered it but I didn’t want it centered directly in the middle so I used background-position: bottom -300px and varying px amounts to get the exact area I wanted to be visible for each slide. Unfortunately on mobile it just shows a big empty block at the edges of the image. Is there any way to have separate CSS for the mobile version?

Marta Wierzbicka staff answered 6 years ago


Hi, I've looked at your website and it seems to look fine, maybe just not centered vertically. Please, look at this page: https://mdbootstrap.com/previews/templates/magazine/html/homepage/v-3.html. I think it may help you. If it is not, please describe in more details, what help you need from us? Best, Marta

Marta Wierzbicka staff answered 6 years ago


Hi, could you provide a demo of your project to allow us to look at this and see how we can help you? Best, Marta

Austin free commented 6 years ago

https://partysprings.com/


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags