+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: Help mobile optimizing a site (/showthread.php?tid=5015143)
Help mobile optimizing a site - Rhinoo - Oct 8, 2015
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 - Oct 8, 2015
Cant really do much with just the HTML Code, could you provide the CSS code also?
* - Rhinoo - Oct 8, 2015
(Oct 8, 2015 01:33 PM)ShizzleFly Wrote: 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 - Oct 8, 2015
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 - Oct 8, 2015
no unfortunately this has not worked, if you would like a screenshot i will send one
* - ShizzleFly - Oct 8, 2015
sure, send me the pic. weird though
* - Rhinoo - Oct 8, 2015
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 - Oct 8, 2015
Hu, I think i made a mistake and paste the same code, ill check.
EDIT: mmm. Can u send a screenshot/pic?
* - Rhinoo - Oct 8, 2015
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 - Oct 8, 2015
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 - Oct 8, 2015
Yes I realise my code is messy, thanks for cleaning it up. Does anyone have a solution to my problem though.
* - ShizzleFly - Oct 9, 2015
(Oct 8, 2015 03:53 PM)ElasticWeed Wrote: 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 - Oct 9, 2015
have u managed to find a solution