Aspect ratio of halfpage carousel layout image

Topic: Aspect ratio of halfpage carousel layout image

Austin 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.

Add comment

Anna Morawska staff answered 6 years ago

1 0 Best answer

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 commented 6 years ago

Thanks the nth-of-type selector works great!

Add comment

Marta Szymanska staff pro premium answered 6 years ago

0 0 Best answer

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 commented 6 years ago

https://partysprings.com/

Add comment

Marta Szymanska staff pro premium answered 6 years ago

0 0 Best answer

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

Add comment

Austin answered 6 years ago

0 0 Best answer

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?

Add comment

Anna Morawska staff answered 6 years ago

0 0 Best answer

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

Add comment

Austin answered 6 years ago

0 0 Best answer

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.

Add comment

Anna Morawska staff answered 6 years ago

0 0 Best answer

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

Add comment

Austin answered 6 years ago

0 0 Best answer

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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

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

About author

Austin

55Support score
4Questions 10Answers

0Snippets likes 0Snippets