Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS issues with responsive design overlapping

Posted on 2014-04-18
6
Medium Priority
?
883 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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 1500 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
Ready to get certified? Check out some courses that help you prepare for third-party exams.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

704 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