• 0
Sign in to follow this  
Followers 0

Section width LESS/CSS being ignored ...


Question

Posted · Report post

Website URL: http://www.buddyflip.com/
Framework Version: 1.1.4
WordPress Version: 3.8
Plugins in Use: 
DMS Professional Tools
Server/Host: your-site.com

Screenshots: attached

Details: I added a 10px border around two sections on the site - which made it look like those sections were 20px larger than the other sections. So - I went in and added " width: 868px !important; " to the custom LESS/CSS for those sections - and - it works when in the editor mode of DMS - but then in preview mode - it completely ignores the designated width and the sections are too wide again. I've read through - and have tried a couple of things - got to the point where I added the " !important " - and that made it work in the editor mode - but then - once live, ker-flooey.

Share this post


Link to post
Share on other sites

5 answers to this question

  • 0

Posted · Report post

HI,

 

You can't just add width XXX !important that wont work. The issue is you have added a border, which is added outside of the element area, so you have two choices.

 

1. You can either replace border with box-shadow or outline

2. Continue to use border but use it in conjunction with

 

box-sizing: border-box

 

This will restrict the border to stay inside the element area and not outside of it, like so:

 

http://d.pr/i/FWWJ

 

Code used for the image above:

 

.main-box {
background-color: #000;
border-style: solid;
border-width: 10px;
border-color: #777;
box-sizing: border-box;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

Just curious if you have jetpack activated I remember having a similar issue where jetpack made the header and the template section not line up correctly. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Aires - Thanks for your reply.

 

Nope. I just have DMS Professional Tools plugin activated right now ... 

 

So - that isn't the culprit ...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hey Danny -

 

Thanks for the code.

 

I added it into my custom CSS - and - it's not doing anything ...

 

I then went into "Inspect Element" in Chrome's web tools - and - the code that I added - and that was saved - isn't showing up in there ...

 

I'm flummoxed. I can see the correct code (your code) in the code editor - but - it isn't showing up when published ...

 

Any ideas?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

See my response to your other topic, as its most likely related to this.

1 person likes this

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0