Boxed Content Width and Height

[jeff_quade]

Hello, if you could take a look at the referenced URL I would like to be able to have the boxed content, orange boxes, reduced in height and increased in width to the full width of the white area so basically it would look just like the promo bar. I will be using these particular orange boxes throughout the site and they will all be identical. Is there a way I can “tag” them and use some code to make the changes throughout the site?

Can you help?

Thanks!

[Mohammad – SUPPORT]

Hi,
Please attach marked screenshot to indicate the boxed content height and your issue.
Thanks
Mohammad

[jeff_quade]

Per the attached image I would like the height of the box to be reduced to the same height as the Promo Bar a the top of the page.
I also would like the width of the box to be increased to the full width of the white part of the page, again just like the width of the Promo Bar at the top of the page.
I will have “copies” of this exact same box content throughout the entire website so I need to be able to make the modification to every box on every page of this particular box.

Attachments:

You must be logged in to view attached files.

[jeff_quade]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.spb_box_text.coloured .box-content-wrap{
padding:4px !important
}
 div.box-content-wrap h1 span{
font-size:x-large !important;
}

Thanks
Mohammad

[jeff_quade]

it looks like that reduced the height but did not change the width. I would like the width to be as wide as the white area of the page. The same width as the promo bar.

[Rui Guerreiro – SUPPORT]

Hi,

Try to use a full width text block instead.

-Rui

[jeff_quade]

Now this is what I get

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Add the code below to reduce the height and remove the icon on the bottom.

.page-id-11397 .full-width-text.spb_content_element.alt-bg.alt-ten.span12.spb_text_column {
  padding-top: 10px!important;
  padding-bottom: 10px!important;
}

.alt-ten.full-width-text:after {
 display:none;
}

-Rui

[jeff_quade]

Hi Rui, just in case you didn’t see the original request.

I would like the height of the box to be reduced to the same height as the Promo Bar at the top of the page.
I also would like the width of the box to be increased to the full width of the white part of the page, again just like the width of the Promo Bar at the top of the page.

*** Important! *** I will have “copies” of this exact same box/banner throughout the entire website so I need to be able to make the modification to every box on every page. And still not effect the other text blocks.

Will this latest custom code accomplish this?

[Mohammad – SUPPORT]

Hi,
Please use this custom css code to make perfect. Now Full width text will look perfect.

.full-width-text{
padding-bottom:5px !important;
padding-top:5px !important;
}

.alt-ten.full-width-text:after {
  display: none;
}

.full-width-text span{
font-size:20px !important;
}

Thanks
Mohammad

[jeff_quade]

So my next question is. How can I reduce the space above the text block on these specific blocks? See image.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Add mt0 to the extra class field of your orange text field

– Kyle

[jeff_quade]

would there be a way to accomplish this within the custom code you provided so i don’t have to go into each page and make the changes?

[Rui Guerreiro – SUPPORT]

In that case replace this one

.full-width-text{
padding-bottom:5px !important;
padding-top:5px !important;
}

by this one

.full-width-text{
padding-bottom:5px !important;
padding-top:5px !important;
margin-top:0px!important;
}

-Rui