Return to previous page

Margin (text) on mobile - by Elimy - on WordPress WooCommerce support

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

Elimy

Participant

July 13, 2015 at 12:05

Hi !

We have found a nice display on computer, using margin on the text areas (about 200px).
But, with this option, the display is not so happy on mobile.. because of ‘margin’.
Is it possible to adapt margin on mobile ?
Keep margin 200px on computer and have margin 20px on mobile ?
I guess we have to add a code on the custom.css file. But which one ?

Thanks for your help !

Eli

Please, contact administrator
for this information.

#74817 Copied

12 Answers

Eva Kemp

Support staff

July 13, 2015 at 15:02

Hello,

Could you please show a screenshot of the issue?
What text are you talking about?

Regards,
Eva Kemp.

#74858 Copied

Elimy

Participant

July 13, 2015 at 16:07

We are working with a banner (left) and a text block (right). We have added margin on the text block to put it in the middle of the block.

But these margin must be different on mobile …

Here are screenshots.

Do you understand what I mean ?

Please, contact administrator
for this information.

#74885 Copied
Jack Richardson

Support staff

July 14, 2015 at 13:20
Hello,

Please add this code in custom.css:
```
@media (max-width: 480px) {
  .vc_custom_1436781131591, .vc_custom_1436707919995, .vc_custom_1436706838893 {
  padding-top: 20px !important;
}}
```
Best regards,
Jack Richardson.
#75110 Copied
Elimy

Participant

July 14, 2015 at 22:21

Hi Jack
It’s not working 🙁

Eli

#75253 Copied

Elimy

Participant

July 17, 2015 at 11:07

Hey ! Can’t help me more ?
Tks a lot !

Eli

#75703 Copied
Eva Kemp

Support staff

July 17, 2015 at 12:47
Hello,

We’re sorry for a delay.
I’ve added this code in CSS block of Visual Composer editor in your home page:
```
@media only screen and (max-width: 992px) {
.banner {
  margin-bottom: -150px !important;
}}
```
Please clear browser cache and check it now.

Regards,
Eva Kemp.
#75716 Copied
Elimy

Participant

July 17, 2015 at 14:19
Oh tks it’s almost working well !

If you can see, sometimes the banner is on the right, sometimes on the left…

Your solution is working perfectly when banner is on the left. But when it’s on the right, then the solution “margin-bottom : -150px” should be on the margin-top…?

Maybe we can give a name to the differents banners ? To have something like this ?
```
@media only screen and (max-width: 992px) {
.banner XXX, .banner YYY, .bannerZZZ {
  margin-bottom: -150px !important;
}}

@media only screen and (max-width: 992px) {
.banner AAA {
  margin-top: -150px !important;
}}
```
So, how can I find the names of the banners ?

Please, contact administrator
for this information.
#75737 Copied
Eva Kemp

Support staff

July 17, 2015 at 14:45
Hello,

I’ve added extra class for the right banner:
http://storage4.static.itmages.com/i/15/0717/h_1437140690_2545135_1b8d40a65b.png
and added this code in CSS block of VC editor:
```
@media only screen and (max-width: 992px) {
.banner-right {
  margin-top: -150px !important;
}}
```
Please check it now.

Regards,
Eva Kemp.
#75739 Copied
Elimy

Participant

July 17, 2015 at 15:31

Tks!
Can we also add an extra class for the banner left ?

Like this, the code will stay normal on “normals banners”.

#75743 Copied

Eva Kemp

Support staff

July 17, 2015 at 15:37

Hello,

Yes, you can write your own class in Banner element editor as shown on screenshot http://storage4.static.itmages.com/i/15/0717/h_1437140690_2545135_1b8d40a65b.png and write the code for this class as I’ve done.

Regards,
Eva Kemp.

#75745 Copied

Elimy

Participant

July 17, 2015 at 15:50

It’s sooo perfect !! Many many thanks !!

I’ve added a similar extra class for the text and now it’s totally what I guessed !

Have a nice week-end !

Eli

#75747 Copied

Eva Kemp

Support staff

July 17, 2015 at 16:02

Hello,

You’re welcome.

Have a great weekend too.

Regards,
Eva Kemp.

#75750 Copied
Viewing 13 results - 1 through 13 (of 13 total)