Contact widget spacing


#1

Hello folks,

Tried to customize the widget area of the rocked pro contact.
Why? Because the spacing of “the find” us and “call us” areas is too narrow.

I tried the developper tools of chrome and when i change the Height and and width as follow:

<h3 class=“widget-title” style=“
width: 400px;
height: 40px;
”>Contact</h3>

<div class=“fp-contact” style=“
width: 400px;
height: 200px;
”><span><i class=“fa fa-home”></i></span><span class=“contact-above”>Vind ons</span><span>Monetstraat 1, 1328PK Almere</span></div>

<div class=“fp-contact” style=“
width: 400px;
height: 200px;
”><span><i class=“fa fa-phone”></i></span><span class=“contact-above”>Bel ons</span><span>(036) 845 39 96</span></div>

the effect is more or less better. But when I add this code:

#pg-400-1-1-0 .div.fp-contact{
width: 400;
height: 200;
}

to my CSS nothing happends …why? and where do i go wrong??

P.s. Id tried this because i dont know the code to add spacing between areas, this would have an even better visual effect.


#2

Hey,

Why not simple reduce the contact form column a bit? That will create more spacing for the contact info widget’s columns.

This


#pg-400-1-1-0 .div.fp-contact{
width: 400;
height: 200;
}

Actually needs to be this to work:


#pg-400-1-1-0 div.fp-contact{
width: 400px;
height: 200px;
}

You can remove the div part if you want but in any case, never use like this: .div


#3

ahh valueble note I shall remember :slight_smile:

Tried this

#pg-400-1-1-0 div.fp-contact{
width: 400px;
height: 200px;
}

But nothing changes…


#4

Yeah, haven’t looked very well at it. Your selector needs to be only this: #panel-400-1-1-0. But anyway, it doesn’t make any sense to add a fixed width to it. You shouldn’t use this code.


#5

Ok ok, I know i don’t know a lot about coding hehe… yet everyday a little bit more :slight_smile:

Anyways I hope you can make a good suggestion to add spacing between the areas “find us” and “call us”


#6

I did offer a suggestion already: edit your page and decrease the width of NEEM CONTACT MET ONS OP column and increase the width of the CONTACT column. This way the spacing between Vind Ons, Bel Ons, Mail Ons will also increase :slight_smile:


#7

So very true :slight_smile: Sorry for the trouble.

One last question: is it possible to increse the space between the columns?


#8

Sure:


#pg-400-1 .panel-grid-cell {
      padding-left: 15px;
      padding-right: 15px;
}


#9

Ok resolved :slight_smile: Thank You