[Rhinoo]

I have a website that i have coded myself working fine on a computer screen, but when coming to mobile optimizing i am having problems and was wondering if any of you could help i would greatly appreciate it.

Problems:
i cannot get my navbar to be 100% across the whole screen even though width is set to 100%

the navbar dropdown menu is not on the screen, and i cannot move it over.

all these problems are for widths of 320px to 480px

here are the 2 files:
http: //pastebin.com/FCiAwVsk
http: //pastebin.com/H1Pu42a3


thank you in advance to anyone that helps, also if possible if you find a solution could you please explain what i have done wrong as i am learning 😉

[ShizzleFly]

Cant really do much with just the HTML Code, could you provide the CSS code also?

[Rhinoo]

Cant really do much with just the HTML Code, could you provide the CSS code also?

i copied the same link twice now fixed, thank you

[ShizzleFly]

Hi, i see the prob:


Change this:

Code

@media (min-width:320px) and (max-width:480px) {
    .slider {
        width: 100%;
        padding-right: 0;

        height: 400px;
        background-size: 100% no-repeat;
    }
    .navbar-brand2 {
      
     margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        width: 50px
    }
.navbar-right {
    padding-top: 20px;
    font-weight: bolder;
}

to this:

Code

@media (min-width:320px) and (max-width:480px) {
    .slider {
        width: 100%;
        padding-right: 0;

        height: 400px;
        background-size: 100% no-repeat;
    }
    .navbar-brand2 {
      
     margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        width: 50px
    }
.navbar-right {
    padding-top: 20px;
    font-weight: bolder;
}
}

Let me know if it worked.

[Rhinoo]

no unfortunately this has not worked, if you would like a screenshot i will send one

[ShizzleFly]

sure, send me the pic. weird though

[Rhinoo]

infact i fail to see what u changed so might not of changed it properly, the only difference i saw was the extra bracket at the end excluding #textposiotnindex and textpositionindex2 and that just messes the webpage up

---

https:/ /gyazo.com/5ba2cf3bb7c4ac70d5ecad88769c67f6

[ShizzleFly]

Hu, I think i made a mistake and paste the same code, ill check.

EDIT: mmm. Can u send a screenshot/pic?

[Rhinoo]

yes this is a possibility ahhaa

---

you would like a screenshot of the code?

---

i will be going off now if anyone finds this solution please just post thank you

[ElasticWeed]

That code was pretty messy. One second it was like "oh, I can read this", and then it became "what happened to the syntax?!".
So please, comment your code in order to make it easier to read.

Any who, I'll have to clean it up a bit more, but I put it on a codepen for easier use by anyone who want sto have a quick look.
http://codepen.io/anon/pen/pjwWEz?editors=110

[Rhinoo]

Yes I realise my code is messy, thanks for cleaning it up. Does anyone have a solution to my problem though.

[ShizzleFly]

That code was pretty messy. One second it was like "oh, I can read this", and then it became "what happened to the syntax?!".
So please, comment your code in order to make it easier to read.

Any who, I'll have to clean it up a bit more, but I put it on a codepen for easier use by anyone who want sto have a quick look.
http://codepen.io/anon/pen/pjwWEz?editors=110

Hi, im always using this: jbeutifier.org

[Rhinoo]

have u managed to find a solution