Simple Pro Customizations

Support
#1

Good evening,

I am hard at work on an exciting new project on which I am using (and loving) Pro: http://wordpress-85748-402823.cloudwaysapps.com.

Could you please tell me how to:

  1. Center lines (i.e. prntscr.com/i4t6ac) on home page.
  2. Hide last line in a column except for on mobile viewing (i.e. prntscr.com/i4t6ac) on home page.
  3. Center the buttons on the “Annual Expo” page (seen here https://prnt.sc/i4t7kf).

Thank you, as always, for your help!
J

#2

Hi J,

1- Please add the following code to Pro Builder > CSS or Theme Options CSS

.el14.x-line, .el16.x-line, .el18.x-line, .el20.x-line, .el23.x-line, .el25.x-line, .el27.x-line, .el30.x-line, .el32.x-line, .el34.x-line, .el36.x-line, .el39.x-line, .el41.x-line, .el43.x-line {

    margin: auto;
}

2- Please add the following CSS

@media(min-width: 481px) {

.el20.x-line, .el26.x-line, .el35.x-line {
display: none;
}}

3- I would sugget you dividing your row in 4 columns instead of two columns and have your buttons on the center columns.

Also click align center on each column.

Hope it helps

#3

Hello,

Thank you for your edits, but unfortunately they do not seem to work. I have implemented the code, but it is still not functioning correctly on any device.

  1. Lines are not centering.
  2. Lines are not consistently showing pixel margins added in styling (i.e. mobile https://prnt.sc/i52oxg).
  3. Only the last line on the first column is disappearing on desktop view (i.e. https://prnt.sc/i52qef).

Thank you,
J

#4

Hi there,

1.Upon checking, I see that the lines are centered now. Could you please try clearing your cache.

2.Try adding the following CSS rule.

@media (max-width:480px){
.el14.x-line, .el16.x-line, .el18.x-line, .el20.x-line, .el23.x-line, .el25.x-line, .el27.x-line, .el30.x-line, .el32.x-line, .el34.x-line, .el36.x-line, .el39.x-line, .el41.x-line, .el43.x-line {
    width: auto;
}
}

3.Update the code as follows.

@media(min-width: 481px) {

.el20.x-line, .el26.x-line, .el27.x-line, .el35.x-line, .el36.x-line {
display: none;
}}

Hope that helps.

#5

Thank you for your assistance - I just need a little more. I have cleared my cache but the menu still is not functioning correctly on larger screens.

Thank you,
J

#6

Hi,

Please set margin left and right of your line element to auto

Hope this helps

#7

Hello,

Thank you for your response. I implemented your suggestion, but the formatting is still all wrong:

  1. Desktop: https://prnt.sc/i5kt6m
  2. iPad: https://prnt.sc/i5kul9
  3. iPhone: https://prnt.sc/i5kuvl

It seems like this should be more simple, no?

Thank you,
J

#8

Hey There,

Please set a width and the maximum width to pixels instead of % so that you will have an accurate desired width to display.

Please remove this code:

@media(min-width: 481px) {
  .el20.x-line, .el26.x-line, .el27.x-line, .el35.x-line, .el36.x-line {
    display: none;
  }
}

And instead of using the custom css, you will have to utilize the “Hide During Breakpoints” option in each of your line that needs to be hidden in a specific screen sizes.

Hope this helps.

#9

Hello,

I implemented all your changes, but notice the margins above and below each line are not applying on any of the devices except on a couple of the lines:

Desktop: https://prnt.sc/i5r1du
iPad: https://prnt.sc/i5r1i3
iPhone: https://prnt.sc/i5r1iy

Any additional suggestions would be much appreciated.

Thank you,
J

#10

Hi there,

You have followed the margin left and right auto, but your lines have different margin top and bottom. Which is why it appears different. Please make sure that all your lines has uniform top and bottom margins.

Thanks!

#11

Hello,

I checked, and they all have uniform top and bottom margins. I do not think that is the issue here. Please feel free to login and take a look:

#12

Hello There,

Thanks for providing the information. I have resolved the issue by updating the custom css code:

/*Center Lines, Hide Last*/
.el14.x-line, .el16.x-line, .el18.x-line, .el20.x-line, .el23.x-line, .el25.x-line, .el27.x-line, .el30.x-line, .el32.x-line, .el34.x-line, .el36.x-line, .el39.x-line, .el41.x-line, .el43.x-line, .el45.x-line {
    margin: auto;
}

@media (max-width:480px){
  .el14.x-line, .el16.x-line, .el18.x-line, .el20.x-line, .el23.x-line, .el25.x-line, .el27.x-line, .el29.x-line, .el30.x-line, .el32.x-line, .el34.x-line, .el36.x-line, .el38.x-line, .el39.x-line, .el41.x-line, .el43.x-line, .el45.x-line {
    width: auto;
    margin-top: 0;
    margin-bottom: 0;
  }
}

Please check your site now.

#13

Hello,

Thank you for your edits, however the margin issue I previously mentioned is still occurring:

The top and bottom margins are not working on mobile.

Thank you,
J

#14

Hey There,

Do you want to have a margin in mobile screens? If that is the case, you would need to update the code again and use this:

/*Center Lines, Hide Last*/
.el14.x-line, .el16.x-line, .el18.x-line, .el20.x-line, .el23.x-line, .el25.x-line, .el27.x-line, .el30.x-line, .el32.x-line, .el34.x-line, .el36.x-line, .el39.x-line, .el41.x-line, .el43.x-line, .el45.x-line {
    margin: auto;
}

@media (max-width:480px){
  .el14.x-line, .el16.x-line, .el18.x-line, .el20.x-line, .el23.x-line, .el25.x-line, .el27.x-line, .el29.x-line, .el30.x-line, .el32.x-line, .el34.x-line, .el36.x-line, .el38.x-line, .el39.x-line, .el41.x-line, .el43.x-line, .el45.x-line {
    width: auto;
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

Please let us know if this works out for you.

#15

Hello,

I implemented this code and am very happy with the way it looks on my iPhone, but not my iPad or laptop. I just want a consistent margin on every device.

Thank you,
J

#16

Hi there,

In that case, you can improve it to something like this, targetting the tablet

.el14.x-line, .el16.x-line, .el18.x-line, .el20.x-line, .el23.x-line, .el25.x-line, .el27.x-line, .el30.x-line, .el32.x-line, .el34.x-line, .el36.x-line, .el39.x-line, .el41.x-line, .el43.x-line, .el45.x-line {
    margin: auto;
}

@media (max-width:979px){
  .el14.x-line, .el16.x-line, .el18.x-line, .el20.x-line, .el23.x-line, .el25.x-line, .el27.x-line, .el29.x-line, .el30.x-line, .el32.x-line, .el34.x-line, .el36.x-line, .el38.x-line, .el39.x-line, .el41.x-line, .el43.x-line, .el45.x-line {
    width: auto;
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

@media (max-width:480px){
  .el14.x-line, .el16.x-line, .el18.x-line, .el20.x-line, .el23.x-line, .el25.x-line, .el27.x-line, .el29.x-line, .el30.x-line, .el32.x-line, .el34.x-line, .el36.x-line, .el38.x-line, .el39.x-line, .el41.x-line, .el43.x-line, .el45.x-line {
    width: auto;
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

And you may as well change the margin to you preference, it’s currently default to 5px similar to mobile, but you can change it :slight_smile:

Thanks!

#17

Hello,

I implemented your code and played with the margins once again. It seems on desktop screens the margin is still not taking effect. Please advise.

Thank you,
J

#18

Hello There,

Please update it into this:

.el14.x-line, .el16.x-line, .el18.x-line, .el20.x-line, .el23.x-line, .el25.x-line, .el27.x-line, .el30.x-line, .el32.x-line, .el34.x-line, .el36.x-line, .el39.x-line, .el41.x-line, .el43.x-line, .el45.x-line {
    margin: auto;
    margin-top: 5px;
    margin-bottom: 5px;
}

@media (max-width:979px){
  .el14.x-line, .el16.x-line, .el18.x-line, .el20.x-line, .el23.x-line, .el25.x-line, .el27.x-line, .el29.x-line, .el30.x-line, .el32.x-line, .el34.x-line, .el36.x-line, .el38.x-line, .el39.x-line, .el41.x-line, .el43.x-line, .el45.x-line {
    width: auto;
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

@media (max-width:480px){
  .el14.x-line, .el16.x-line, .el18.x-line, .el20.x-line, .el23.x-line, .el25.x-line, .el27.x-line, .el29.x-line, .el30.x-line, .el32.x-line, .el34.x-line, .el36.x-line, .el38.x-line, .el39.x-line, .el41.x-line, .el43.x-line, .el45.x-line {
    width: auto;
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

Hope this helps. Please let us know how it goes.

#19

Hello,

This solution finally works! Thank you! You are so great!

J

#20

You’re welcome!
Thanks for letting us know that it has worked for you.