Making my page responsive?

  • Hello I am having a few issues with the responsive side of setting up this site. It is my first website and due to having moved the navigation bar away from where the theme suggested i place it I am struggling to now make it a responsive site where the bar sits against the banner like it does in full screen, it now seems to jump about the page. Could anyone please help me to make it more responsive and better functioning please?

    Thanks in advance.

    https://callardscakes.com/

Viewing 7 replies - 16 through 22 (of 22 total)
  • Thread Starter wiggyswig

    (@wiggyswig)

    Just cleared it but doesn’t seem to resolve the issue. I’m really confused.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    When you inspect the navbar using Firebug what CSS do you see causing the position?

    Thread Starter wiggyswig

    (@wiggyswig)

    It seems that there are 2 the navwrap and navwrap2 both inside the wrapper_bg

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I see that markup too. Is there anything in the CSS identifiable by Firebug, that could be causing this weird behaviour?

    Thread Starter wiggyswig

    (@wiggyswig)

    This is the css for navwrap2

    @media screen and (max-width: 600px) {

    nav{

    width: 100%;

    }

    #navwrap2{

    padding-left: 5px;

    padding-right: 5px;

    }
    This is for navwrap

    #navwrap{

    width: 100%;

    z-index: 1000;

    height: 40px;

    }

    .admin-bar #navwrap{

    position: absolute;
    top: 21%;

    }

    and for both of the them

    @media screen and (max-width: 780px) {

    .admin-bar #navwrap{

    position: absolute;

    top: 21%;

    }

    }

    #navwrap2{

    max-width:100%;

    height: auto;

    background-color: #774f38;

    margin: auto;

    -webkit-box-shadow: 0 1px 3px 0px rgba(0,0,0, 0.3), 0 3px 6px 0px rgba(0,0,0, 0.15);

    -moz-box-shadow: 0 1px 3px 0px rgba(0,0,0, 0.3), 0 3px 6px 0px rgba(0,0,0, 0.15);

    box-shadow: 0 1px 3px 0px rgba(0,0,0, 0.3), 0 3px 6px 0px rgba(0,0,0, 0.15);

    }

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Do you have another machine with FF available to test in?

    Thread Starter wiggyswig

    (@wiggyswig)

    No this is my only computer I could ask a friend to test in to see if there are any issues

Viewing 7 replies - 16 through 22 (of 22 total)
  • The topic ‘Making my page responsive?’ is closed to new replies.