Width of Parallax widget sections

Shapely
1

Hi Movin,

Following-up on the main topic of this thread (https://colorlibsupport.com/t/cusomizing-parallax-widget/page/2/#post-66503), I’m looking to have the text (aka the content) spanning about 3/4 across the parallax widget, with my cartoon profile picture beside it on the left. Ideally the cartoon picture should be sized no larger than 300×300 px (it’s 600×600 px) to compensate for retina monitors.

At the moment, this script you shared with the original poster does change the width but it’s not quite achieving exactly what I’m after. Here’s what I am trying:

.shapely_home_parallax img.cast-shadow {
width: 300px;
}

My website is http://photograpreneur.ca – thanks!

2

Hi @photogirl84,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other


#custom_shapely_home_parallax-6 .col-md-7.col-sm-6.text-center.mb-xs-24 {
    width: 30%;
}
#custom_shapely_home_parallax-6 .col-md-4.col-md-offset-1.col-sm-5.col-sm-offset-1 {
    width: 70%;
}

Best Regards,
Movin

3

Thanks Movin, however it seems to not be giving me quite what I need. Maybe there is a maximum width overall, and it’s not wide enough for the look I want?

Here’s a mock-up of what I’m hoping to achieve (please see attached pic). I made the image larger, and the text would ideally fill that red space.

Also on mobile, the cartoon appears really tiny, and it would be great to have it full width of the mobile with text underneath.

Any thoughts? I greatly appreciate your help!

Thanks,
Lisa

4

Remove the previously provided CSS code and try using the following CSS code to achieve this.

@media (min-width: 992px){
#custom_shapely_home_parallax-6 .col-md-4.col-md-offset-1.col-sm-5.col-sm-offset-1 {
    width: 64%;
    margin-left: 0;
}
#custom_shapely_home_parallax-6 .col-md-7.col-sm-6.text-center.mb-xs-24 {
    width: 36%;
}
}