Jump to content


Photo
- - - - -

Affecting individual textbox margins

textbox margin

  • Please log in to reply
5 replies to this topic

#1 colbystream

colbystream

    Member

  • Members

  • 17 posts
  • Country: Country Flag

Posted 22 February 2014 - 12:58 AM

Hi,

 

I can't figure out how to insert margin between two text boxes. Let me give you feedback and what I'm looking for.

 

I've given my text boxes a background with rounded edges, so that writing can appear on top of this. I'd like there to be a small white space between each of these spaces. I figured the way I can do this is by creating my own command under the Custom menu and then applying it to the text boxes I want in the "Styling Classes" section. The section I wrote was:

 

.margin {
  margin-bottom:20px;
}
 
It's not working. I notice that if I just leave it as "margin" (and not "margin-bottom") I get a large space between the text box and the top of the "column" section that it is within. What am I doing wrong? I've tried using Firebug to locate what I'm not doing right, but can't figure it out.
 
Help much appreciated.
 
~Colby


#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 February 2014 - 10:58 AM

Hi,

 

Are you saying you wrote the following:

 

.margin {
  margin-bottom:20px;
}
 
in the Sections Styling classes field ? If so, that isn't correct and won't work, as the styling classes field is for classes and not CSS which is what you have wrote.
 
The styling classes field only works with class names, below is an example.
 
Lets say you want to have some sections have a blue background. You would add the following to your custom CSS.
 
.my-blue-bg {
background-color: #428BCA;
}
 
Then what you would add in all your section that require a blue background would be this:
 
my-blue-bg
 
You write nothing more than the class name.
 
To resolve your issue, I think the best thing would be to provide a link to the site in question so we can see first hand what it is you're trying to do. Also, remove that code you add to the styling classes field, as it isn't correct.


#3 colbystream

colbystream

    Member

  • Members

  • 17 posts
  • Country: Country Flag

Posted 23 February 2014 - 02:52 PM

Sorry for the confusion. No, I didn't write the CSS in the styling class field. Wrote it in the custom CSS section and then referenced "margin" in the styling classes field. I'm getting a result when I write

 

margin:20px;

 

(this creates a large space at the top of the textbox) but no result when I use

 

margin-bottom:20px;

 

You can see the page here: http://arcadianporch...ng-great-teams/

 

I want spaces between each of those grey boxes. They are each an individual textbox. Some of them are with a "column" section and some aren't; I don't have a particular preference about whether it is or not (and don't know if it would even make a difference.



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 February 2014 - 03:41 PM

Basically, your code is being overwritten. Although I don't see your margin class on any of your sections.

What you will want to do is this, here is what I used:

 

.round-corners {
  .border-radius(6px);
}
.bg-blue {
  background-color: #428BCA;
}
.text-white {
  color: #FFFFFF;
}
 
section[id].twentymb {
  margin-bottom: 20px;
}
 
I then added the classes name to the sections I want to have this styling and boom, it worked.
 


#5 colbystream

colbystream

    Member

  • Members

  • 17 posts
  • Country: Country Flag

Posted 23 February 2014 - 09:18 PM

Awesome! Thank you Danny!

 

Two other notes, if you don't mind real quick.

 

1. Where does the "section[id].twentymb" portion come from. I'd like to be able to understand and duplicate myself in the future.

 

2. Between this morning when I made that page live and this afternoon, some text from the second text box completely disappeared (I wrote the text two days ago). I've noticed this sort of problem before, where stuff will just disappear. Is there someone I can report these to?



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 24 February 2014 - 12:50 PM

1. See here for explanation - http://www.w3schools...s_selectors.asp

 

2. Other people have brought this to out attention. However, when asked no one has been able to give any of our staff, exact steps to recreate the issue. I have tried hundreds of times to recreate it and not once have I been successful.







Also tagged with one or more of these keywords: textbox, margin