Return to previous page

CSS on Interactive Banners not working - by mozmocreative

This topic has 7 replies, 2 voices, and was last updated 9 years, 1 months ago ago by Eva Kemp

mozmocreative

Participant

March 5, 2015 at 02:12
Hi, I have a page with interactive banners, which I’m trying to style so they look good at all browser sizes, but the CSS below isn’t working when put in custom CSS, why is this? Or, alternatively, how can I have the layout I have resize to 2 columns (instead of 3) at browser widths 992px and smaller (except when it goes down to 1 column anyway)?
```
@media (min-width: 1184px) {
.banner-block .mask p {
font-size: 13px;}
}

@media (max-width: 977px) and (min-width: 1184px) {
.banner-block .mask p {
font-size: 12px;}
.banner-block img {width: 110%!important;}
}

@media (max-width: 753px) and (min-width: 976px) {
.banner-block .mask p {
font-size: 12px;}
.banner-block .bb-back-icon {display: none;}
.banner-block h3.bb-top-title i {display: none;}
.banner-block img {width: 150%!important;}
}
```
Please, contact administrator
for this information.
#47467 Copied
6 Answers

Eva Kemp

Support staff

March 5, 2015 at 17:45

Hello,

Are you talking about the banners on the Home page after the slider?
As I see 3 banners are shown when viewing the site on a tablet.
Do you want to show only 2?
Please clarify with more details and show us screenshots.

Thank you.
Regards,
Eva Kemp.

#47660 Copied

mozmocreative

Participant

March 10, 2015 at 01:56

Sorry, I completely forgot the link to the page I’m talking about..

http://cp211.ezyreg.com/~mymy2015/facilities/

After the first breakpoint, the text no longer fits in the boxes and images don’t fill the box completely. If I could have the layout just keep everything the same size but shrink down to 2 columns (instead of 3) at the first breakpoint it would be good, and then down to 1 column at 992px width or less.

If the above isn’t possible, I need the CSS I’ve put in my original post up top to work properly in order to stretch the images and resize the text to fit.

http://imgur.com/svXzgix

#48353 Copied

mozmocreative

Participant

March 16, 2015 at 00:59

Hi, just following up on this since it’s been almost a week. Thanks

#49712 Copied
Eva Kemp

Support staff

March 16, 2015 at 11:33
Hello,

Sorry for a delay.

You can increase the height of the block using this code in custom.css file:
```
@media (max-width: 768px) {.banner-block, .wpb_row .wpb_column .wpb_wrapper .banner-block {
 height: 290px !important;
}}
```
Thank you.
Regards,
Eva Kemp.
#49793 Copied
mozmocreative

Participant

March 17, 2015 at 04:40

Ok, thanks, but this only stretches the height of the box, not the background too, so there’s a gap inbetween where the background stops and the box title.

http://i.imgur.com/XYOn3Mr.png

#50044 Copied
Eva Kemp

Support staff

March 17, 2015 at 15:07
Hello,

Please add this code as well:
```
@media (max-width: 768px) { .banner-block.banner-block-custom-height img {
    width: auto !important;
}
.banner-block.banner-block-custom-height h3.bb-top-title {
   height: 40px;
}
}
```
Thank you.
Regards,
Eva Kemp.
#50191 Copied
Viewing 7 results - 1 through 7 (of 7 total)