Parallax \"Right\" column customisation

Shapely
1

Hi all,

thanks so much for the theme!

I am looking to customize the layout of the parallax widgets. So far I managed to customize the widget with image position “left”, with the following code (as adjusted based on what I found on the forum:

/change column split in section 3/
@media (min-width: 992px){
#shapely_home_parallax-3 .col-md-4.col-md-offset-1.col-sm-5.col-sm-offset-1 {
width: 60%;
margin-left: 10;
}
#shapely_home_parallax-3 .col-md-7.col-sm-6.text-center.mb-xs-24 {
width: 30%;
}
}

This is for widget section 3 on the home page. Now I have widget section 4 and want to do the image position “right”, I change the code to feature #shapely_home_parallax-4, however it doesnt work for “right”, if I change the position to “left” again, then it works.

Could you please advice on how I need to change the code? It would be great if you could also help with the code for the position “bottom”.

Thanks so much!!!
Jens

2

Hi Jens

You want to customize it but what exactly you want to change? what is your goal?
question is not clearly formulates, I see you are trying something but can’t get what exactly :slight_smile:

3

Hi Noda,

thanks for the quick response, please see the attached screenshots. I would like to change the column width, i.e. make the image smaller and the text wider.

The code I pasted lets me change the width of the “red columns” in the parallax section, where the image is left.

However, the code does not work when I select that same section to have the image “right” (see second screenshot). I dont know what the issue is, I assume it has to do with the labelling of columns?

I hope this helps to explain what I mean :slight_smile:

4

Hi again :slight_smile: If I am already asking, I might as well throw in another one that has me pulling my hair out:

The attached screenshot is of section 8 (#shapely_home_parallax-8), which is a section where the image is in the position “top”. Unfortunately though, the image is not centralized and I would like to change the size of the image again, i.e. I would like it much smaller and directly centered above “Our Mission”.

How could I achieve this? Thanks a lot!!

Update: I figured it out with the following code:

#shapely_home_parallax-8 .img-responsive {
margin: 0 auto;
}
img {
width: 20%;
}

Thanks though :slight_smile: The other issue of my previous post remains

5

Hi Noda,

the problem still remains - if you have any time it would be amazing to get your input on it :slight_smile:

Thanks a lot and best wishes,
Jens

6

Hey Jens

  1. you have to generate custom css for each position of the image, for example when you place the image on the right and text left, generated css will not work if you change the position of text and image, so you have to generate code for each position

  2. Sorry for the delay, can you please provide URL of your project as well? I need it to take a look

7

Hi Nora,

the project can be found under themoralimperative.org

I am talking about widget 4, the rest I already managed to change with custom code.

Please let me know when you have looked at it so I can put the “coming soon” mode on again - some content is not yet agreed.

Thanks a lot,
Jens

8

Hey there

I see widget 4 but what is wrong with it? as i said in my previous message you have to separate your custom css codes for each widget,

9

Hi Noda,

I know I need to customize the css for every widget, my problem is that i dont know what the code should be for widget 4 in order to make the image smaller and the text wider.

For widget 3 I managed with the code posted earlier, but that one does not work for widget 4 and I assume that is because the layout is different - widget 4 has the image on the right whereas widget 3 has the image on the left.

If you could help me with the code for widget 4 to make the image smaller and text wider (i.e. adjust the columns, see the earlier screenshot) that would be amazing :))

Thanks,
Jens

10

Hi there,
is the issue now clearer? It still remains for me :slight_smile:

Thanks a lot,
Jens

11

Hello Jens,

I’m so sorry, I definitely send my previous message but looks like it did not go through

targeting items in the widget can be done by their css selectors, something like this:

#shapely_home_parallax-4 .col-md-4.col-sm-5 {
width: 60%;
}
#shapely_home_parallax-4 .col-md-7 {
width: 40%;
margin-left: 0%;
}