Problem with responsive design

  • Raider000

    (@raider000)


    12 years, 11 months ago

    Hi,

    After everything I have tried out, I run out of ideas now! Maybe someone can help. Here is the problem:

    When you visitit this site between about 783px and 994px (need to try out) and hover any menu item on the navigation which has a sub menu, you will find out that the same menu item keeps moving to the right site and it destroys the whole navigation. When you full size it on the browser of your computer (over 1000px), everything looks fine.

    How can I fix this?

    I would appreciate any help!

Viewing 7 replies - 1 through 7 (of 7 total)
  • esmi

    (@esmi)

    12 years, 11 months ago

    Try sorting out the markup errors. Then move onto the CSS errors.
    http://codex.wordpress.org/Validating_a_Website

    Christiaan Conover

    (@cconover)

    12 years, 11 months ago

    Are you using a custom theme or one that you downloaded?

    Thread Starter Raider000

    (@raider000)

    12 years, 11 months ago

    It’s a custom theme and it’s based on twitter bootstrap.

    Michael

    (@alchymyth)

    12 years, 11 months ago

    some style in /assets/css/bootstrap-responsive.css seems to be adding a left margin to the dropdown ul;

    line 663 (below is retrireved from Firefox’ web developer add-on; the actual CSS might look different):

    .nav-collapse .dropdown-menu
{
  position: static;
  top: auto;
  left: auto;
  float: none;
  display: none;
  max-width: none;
  margin-top: 0px;
  margin-right: 15px;
  margin-bottom: 0px;
  margin-left: 15px;
 ....  }
    Thread Starter Raider000

    (@raider000)

    12 years, 11 months ago

    Thanks for your research, alchymyth!

    But as well as the style is using a left margin, it is also using a right margin with same pixels.

    As I don’t want to change the bootstrap files, I have added the following code to my own CSS file but for some reason it seems not to work:

    .nav-collapse .dropdown-menu { margin: 0 !important; }

    Michael

    (@alchymyth)

    12 years, 11 months ago

    my browser inspection tool (Firefox’ web developer add-on CSS tool) can’t find this new CSS in your site;

    however, it seems to work when applied in that browser inspection tool;

    to what CSS file have you added the style?
    have you tried to clear the browser cache?

    Thread Starter Raider000

    (@raider000)

    12 years, 11 months ago

    Sorry I forgot to mention. I was testing this local. I was also testing the same on de development tool of Google Chrome on ‘element-style’. It doesn’t change anything though.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Problem with responsive design’ is closed to new replies.