Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 939
  • Last Modified:

CSS issues with responsive design overlapping

I have a site that I'm working on making responsive, but I'm having some CSS issues.  The main issue right now is that the main content articles are overlapping (see site at http://bit.ly/1jfGu9b).  I've been trying all sorts of things, so I suspect my CSS is spaghetti at this point.  I'm hoping someone can point me at the stupid thing(s) I've done that I need to fix.  Thanks in advance.
0
katwill
Asked:
katwill
  • 3
  • 2
1 Solution
 
Edwin HofferTechnical ExpertCommented:
Hey there
First of all your web page is cluttered with too many css style sheets. Professional recommendation is to maintain few style sheets as your webpage defeats the purpose of creating css in the first place .The alignment and id’s would be recovered as soon as the web page css is made more organized .If you need assistance related to particular portion for correction or alignment, feel free to revert back as soon as possible.
Thanks
~Edwin j hoffer~
0
 
katwillAuthor Commented:
This is Drupal; I don't get to decide how many style sheets I get to use. Sorry.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I am not a drupal specific developer but I agree.  I found this that might help on that subject. https://drupal.org/node/510442

Back to your problem, you do have a mix of things going one.  As example, in
sites/all/themes/best_responsive/css/responsive.css?n490b0
@media only screen and (min-width: 768px) and (max-width: 959px) {

form#frmSearch > fieldset{
   position:relative;
   margin-left:-190px !important;
   margin-top:70px;
   width:250% !important;
   max-height:80px !important;
   z-index:10;
  }

Open in new window

You have a mix of pixels and percentages.  Creating a responsive page is more difficult because you have to plan out not only for each media query, but in between as well when you are using percentages.  

It might be worth looking to start fresh and use a responsive grid/library like bootstrap http://getbootstrap.com/ or foundation http://foundation.zurb.com/

I found a plug in for bootstrap https://drupal.org/project/bootstrap.

It will make your life a lot easier as they have already figured out all the hard stuff.  You just need to add classes that account for small, medium or large screens on a 12 column grid.

Here is a good base explanation of how it works http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28406542.html
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
katwillAuthor Commented:
I started over again, with a clean responsive.css from scratch.  Still not sure what was causing the issue, but starting over again now, it's gone.
0
 
katwillAuthor Commented:
I've requested that this question be closed as follows:

Accepted answer: 0 points for katwill's comment #a40012380

for the following reason:

I was forced to start over, as there was apparently not a quick or easy fix for this.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Starting over fresh was what I suggested http:#a40010465
It might be worth looking to start fresh and use a responsive grid/library like bootstrap
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now