I am having some trouble on this and can not figure it out on my own. I am not any kind of coder just dabbled in it a few times starting in 1998. I am trying to design a website for a friend of mine using bootstrap 3.3.4 for the first time. After getting it online I realized it is way to wide on Iphones. It shows about 50% padding on the right side. You have to zoom in to use view the website correctly. Can anybody give me any input on what can be causing this? I cant find a cause anywhere. On the desktop version it works perfectly even when I resize the window. It is a little to wide on android also but is not near as noticeable as it is on IOS. The website is up at
This link
Thank you for any help
It's difficult to tell exactly what is wrong as I don't have an iPhone. But some observations:
You are loading Boostrap javasript in the head, then loading jQuery and Bootstrap js again at the bottom. Remove the one from headas it's giving a console error.
In the footer, your row has as it's child element a class of col-me-6 which I suspect is a typo. Also it has an inline style of width: 100% which is not advisable - use the grid system to control widths.
Finally, and most likely your problem, in the #portfolio container, your first row has some invalid contents. Only a col-* can be a child of a row. You also have a nested row which is screwing up the margins and giving you the extra wide window.
Related
So my problem is that for some reason on one page of a website I've been fiddling with, the two navigation bars that I have (Top and Sidebar Navigation) are for no apparent reason scaled down in the Google Chrome browser, their behavior is entirely normal in both iE and Firefox. The bar's remain completely functional, but are simply scaled down perhaps to 66% of the intended size.
Here is the code for the page in question: http://pastebin.com/uvrPR1JW
Here is the code for a similar, but functioning page for reference: http://pastebin.com/5dAMREfC
They're running off the same style sheet so the issue is likely in the HTML, however the style sheet is linked in the comment section for reference. If anyone spots any reason why it would be doing anything like this it'd be great to know. And I apologize for the messy code, as I said I'm just playing around with it.
Update:
You may notice that my code includes at least one flexbox, here is question posted by another user that may be related but I can't make heads or tails of it: Chrome shrinks figure elements as they are added to a flexbox
Update: Doesn't seem to be a problem with the flexbox, the issue still exists even when I remove all content except the top header.
I'd say it's the setup of your navbar, how you have an image and you just change the position of it on hover. Chrome has a weird feature where it moves things around when there is images so I would suggest looking up how to make a proper navigation bar (It's pretty easy).
I'm using bootstrap for a personal website, and I'm having trouble with a Javascript slideshow.
Basically, when the browser window gets smaller, instead of the slideshow DIV content shrinking proportionally and maintaining the sizes of the content, it is cutting off the edges of the content.
The text isnt breaking to another line when I resize the browser it just covers up the content. I'm sure this is very simple but I just cant work it out, would be very appreciated if someone could take a look, here is the link to the website you can see for yourself.
http://www.luke-taaffe.com
I see some issues with your HTML. Layout you have created is not required and you'll keep running into issues as you move forward with it.
Hence i would suggest to fix it now itself.
As you want to use bootstrap, get more idea about their responsive design elements : Tutorial / Bootstrap Responsive Grid System
Then choose a theme among these
It will automatically take care of you design's responsiveness.
Ok I fixed the issue, I spent about an hour looking at the media queries in bootstrap-responsive.css.
First I had to use navbar-right in my header and remove all of the margin, padding I had previously used to position the links.
This was stopping the links this maintained the links to the right of the window without covering them when I resized.
Then the navbar was breaking onto 2 lines, so I had to change the media queries.
So this is my first time trying to use a responsive framework...also fairly new to building responsive sites in general - but had a lot more luck with just building them from scratch and sizing each element...though Foundation seems like a much better solution if I could just get my head around it!
Work in progress is here: http://client.analog.la/360/
It's behaving 'alright' in my desktop browsers (resizing down to 400) except for a problem with the menu - the issue I'm having is trying to get the menu to drop down below the logo and be properly centered.
On actual mobile and tablet having way more issues...the menu is sitting above and the whole layout or to one side and not dropping down at all. On ipad the whole layout seems to be only about 95% page width with a random margin down the right hand side...on iPhone the whole layout only seems to be about 50% width...which just looks...awful. There's so much discrepancy between how the layout looks on devices vs. how it looks on desktop at the same resolution that I'm a bit baffled...Also, really not sure where I went wrong with the sizing to make it look so wrong on devices!
Any help would be massively appreciated!
Thanks,
Not sure if you're still looking for help on this, but there are a number of issues in your codebase, and it's hard to say which ones are causing the behavior you're trying to address. Your very first div uses the columns class, but it's not nested in a row. Elsewhere, you have rows immediately nested in other rows with no apparent benefit, more columns nested in other columns without an interposing row, and nested rows that aren't set to collapse. You're also using spacer.png in a few places, which almost reduced me to tears.
And your top level headers are in spans instead of h1. My only guess here is that you were attempting to sidestep Foundation's default styles? Use a class. You need those h1s for SEO, semantics, etc.
No insult intended, but you might do well to check out Treehouse and sharpen your coding skills - could save you a lot of time and frustration in future work.
I am trying to put together a simple portfolio site, and have implemented a basic responsive design into the CSS as well (at the very bottom of it), and it behaves just fine - shrinks the 5 columns down to a single column and hides a few elements when I resize the computer browser. But on iPhone/Android browser it doesn't make any difference.
Here is the page in question -> Sample Page
And I can't figure out what the issue is... as in, this should be fairly simple to do, but apparently it's not, and now I'm losing sleep over it... so might as well ask here.
Have you [also] consider the use of viewport meta-tag? Just check This.
I tried loading the site but it seems like your custom js file is not found(404 error).
Hello good people of Stack Overflow, I am having great troubles with designing a website. I have pretty much finished the first page except for a bit of content, but that's not the question. I am using a PHP include to include a menu on top of each page, to keep it uniform. However, when I resize the window, in any browser, the links will begin wrapping. I think it is an issue with my CSS, or it could be a problem caused by my lack of PHP knowledge.
The link to my website is, builtbyhabel.net63.net. The code should be able to be seen on the developer tools for whichever browser you are using.
Sounds like you have your links inside a container without a fixed width.
<div><a><a><a></div> <-- this one will contract with the width of your browser
vs
<div><a><a><a></div> <-- CSS div { width:978px; }