Return to previous page

Add text padding to banners - by neil - on WordPress WooCommerce support

This topic has 13 replies, 3 voices, and was last updated 9 years, 9 months ago ago by Eva Kemp

neil

Participant

January 20, 2015 at 13:51

Hi

Is there any custom css that I can add to the banners under the section Food and Drink on my site http://falcon.bimmerworx.com/

I want the body text in the banners to have some padding but everything I try doesn’t seem to work

#35439 Copied

12 Answers
Robert Hall

Support staff

January 20, 2015 at 14:26
Hello,

Try to add this code into custom.css file.
```
.banner.valign-bottom .banner-inner{
padding:5px;
}
```
Here is a video tutorial how to create custom.css: https://www.youtube.com/watch?v=Qok2zRedRMY&feature=youtu.be.

Regards,
Robert Hall.
#35453 Copied
neil

Participant

January 20, 2015 at 14:56

Thank you, it has partly solved my issue.

This may be an impossible request but if you take a look at that section now you will see the first two banners have the text that start at different lines/levels.

Is there a way to ensure that each banner text starts on the same line? The css code you sent gives a valign-bottom which may causing this issue

#35460 Copied
Eva Kemp

Support staff

January 20, 2015 at 16:05
Hello,

Unfortunately your banner images have different sizes and text will be over the bottom border for some banner.
You can try to add this code in custom.css file:
```
.banner.valign-bottom .banner-inner {
  top: 250px;
}
```
Thank you.
Regards,
Eva Kemp.
#35471 Copied
neil

Participant

January 20, 2015 at 16:15

Hi

I will be making all 4 banners the same size so hopefully this will solve it

Thanks

#35472 Copied

Eva Kemp

Support staff

January 20, 2015 at 17:15

Hello,

Ok, let us know if further assistance is required.

Thank you.
Regards,
Eva Kemp.

#35484 Copied

neil

Participant

January 26, 2015 at 14:04

Hi there

I still have a slight problem with this. All looks good on mobiles portrait but on tablets and mobiles landscape the text comes out of the boxes.

See this link for an example http://mobiletest.me/ipad_mini_emulator/#u=http://www.thefalconathatton.com/

#37052 Copied

Robert Hall

Support staff

January 26, 2015 at 18:15

Hello,

Please provide us with wp-admin access in Private Content.

Regards,
Robert Hall.

#37110 Copied

neil

Participant

January 26, 2015 at 20:24

sure

Please, contact administrator
for this information.

#37146 Copied
Eva Kemp

Support staff

January 27, 2015 at 10:19
Hello,

Please add this code in custom.css file:
```
@media (max-width: 979px) {
.banner img {
height: 100%;
}
.banner.valign-bottom .banner-inner {
padding: 18px;
}
}
```
Thank you.
Regards,
Eva Kemp.
#37274 Copied
neil

Participant

January 27, 2015 at 11:30

Hi Eva

Sorry, that hasn’t solved the issue.

Please look on this link and you will see the text is still outside the boxes in the dine.drink.stay section

http://mobiletest.me/ipad_mini_emulator/#u=http://www.thefalconathatton.com/

#37313 Copied

neil

Participant

January 27, 2015 at 11:48

I have added <br /> code to try and fix this issue which has partly worked but if you look at the site on an ipad in landscape you will see that the bottom of the content has disappeared

http://mobiletest.me/ipad_mini_emulator/#u=http://www.thefalconathatton.com/

http://ipadpreview.com/previewer?url=http%3A%2F%2Fwww.thefalconathatton.com%2F%23menu

#37321 Copied
Eva Kemp

Support staff

January 27, 2015 at 13:38
Hello,

Please try to use this code in custom.css file:
```
@media only screen and (max-width: 1200px) {.banner.valign-bottom .banner-inner {
padding: 12px !important;
}
.banner.valign-bottom .banner-inner {
top: 200px !important;
}}
```
Thank you.
Regards,
Eva Kemp.
#37345 Copied
Viewing 13 results - 1 through 13 (of 13 total)