Solved

CSS issues with responsive design overlapping

Posted on 2014-04-18
6
853 Views
Last Modified: 2014-04-21
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
Comment
Question by:katwill
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 15

Expert Comment

by:Edwin Hoffer
ID: 40010071
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
 

Author Comment

by:katwill
ID: 40010222
This is Drupal; I don't get to decide how many style sheets I get to use. Sorry.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 40010465
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:katwill
ID: 40012380
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
 

Author Comment

by:katwill
ID: 40012553
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
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 40012537
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

Featured Post

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

617 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question