mobile box

Beaver Builder
1

Hi,

I would like to be able to show essentially something that looks like this on mobile
http://qponkraze.com/mobile/

I can’t seem to do that with beaver builder

scroll down to the main benefits…

Best,

Peter

2

Hi Peter,

Are you referring to those four boxes with the red border?

If so, you should be able to recreate that using either a combination of a Text and Photo module or using the Callout Module.

To get the border you will need to edit the Column settings and set the Border color, style and width there.

Thanks,
Danny

3

actually, sorry, I am trying to make boxes like that with an icon? Can I do so with the icon module? I have set margins and padding it the icon module but I can never seem to make boxes for my mobile site.

Best,

Peter

4

Hey Peter,

Can you share the URL of the site you’re working on so we can check how you’re doing it?

Ben

5

here is a link that I isolated for you to see. http://qponkraze.com/post-92/

I have a boarder on all sides for both boxes.

I set the column margins and padding both left and right at 20. I would think that would make it so you can see the left and right borders on mobile…

Best,

Peter

6

Hi Peter,

Can you try adding the following CSS, please?

@media (max-width: 768px) {
  .fl-node-56e83035d9822 .fl-col-content {
    border-left: 1px solid #f90505 !important;
    border-right: 1px solid #f90505 !important;
  }
}

Let me know if this resolves the issue.

Thanks,
Danny

7

[Content Hidden]

8

Hey Peter,

I’m just append this styling to Danny’s above margin: 10px 15px !important; so it looks like this…

@media (max-width: 768px) {
  .fl-node-56e83035d9822 .fl-col-content {
    border-left: 1px solid #f90505 !important;
    border-right: 1px solid #f90505 !important;
    margin: 10px 15px !important;
  }
}

Ben

9

awesome thanks! Can you please do the same thing if I used a photo instead of icon module?

And what module would I be using?

This is what I had in mind…
Step 1
(photo)
Content

Thanks again,

Peter

10

[Content Hidden]

11

nvm I figured out how to do photo…

actually the code didn’t seem to work on one of my other sites for some reason…
here is all my custom css

@media (max-width: 768px) {
.fl-node-56e83035d9822 .fl-col-content {
border-left: 1px solid #f65803 !important;
border-right: 1px solid #f65803 !important;
margin: 10px 15px !important;
}
}
.fl-page-content h1,
.fl-page-content h2,
.fl-page-content h3,
.fl-page-content h4,
.fl-page-content h5,
.fl-page-content h6 {
margin: 0;
padding: 0;
}

12

Hi Peter,

It is likely the fl-node-56e83035d9822 is different on your other site. You will want to inspect the node-id and update your code.

Thanks,
Danny

13

[Content Hidden]

14

Hi Peter,

You can either use your browsers built-in dev tools and inspect the element.

CloudApp

I would recommend adding a unique to your row. To do this, open the settings for your row and click the Advanced tab. Once there, scroll down and add a class name to the Class field. Save the changes and then in the code you posted above, replace fl-node-56e83035d9822 with your class name. So the CSS looks like this:

@media (max-width: 768px) {
  .my-custom-class .fl-col-content {
    border-left: 1px solid #f65803 !important;
    border-right: 1px solid #f65803 !important;
    margin: 10px 15px !important;
  }
}

This should resolve your issue.

Thanks,
Danny

15

[Content Hidden]

16

Hey Peter,

Like what Danny said above, we can instead add a custom class to the column you want the styling to apply to. That should be easier and more appropriate for you since you’re planning to use this same styling over different sites. Just follow the steps below.

  1. Go over to the column settings.
  2. Go to the Advanced tab and scroll down, you'll see a CSS Class field.
  3. You can type in whatever you want so long as it's one word, no special characters, and it starts with a letter, e.g., fl-mobile-box.
  4. Add the CSS snippet below changing .fl-mobile-box to whatever class you've added above. ``` @media (max-width: 768px) { .fl-mobile-box .fl-col-content { border-left: 1px solid #f65803 !important; border-right: 1px solid #f65803 !important; margin: 10px 15px !important; } } ```
  5. You can then add the same CSS Class to the other columns you want this to apply to.

Let us know how it goes!

Ben

17

thanks guys!

Best,

Peter

18

No worries at all, Peter! Glad we could help. :slight_smile: Enjoy!

Ben