I'm making a quick and dirty website for a university wed design module. The website isn't intended to work but instead to be used as a tool to demonstrate how the proposed design would look and operate.
I have used a bootstrap template and things have gotten a bit messy.
The Problem:
I have a navigation bar on the left of each page with an image as a background. if i re-size my browser window the content remains the same height (as it should) but the background disappears from the bottom.
here's a link to the website:
http://www.wareisjoe.com/bistro/
I don't know if this is due to poorly formed HTML or a css issue. any help would be greatly appreciated.
This has to do with bootstrap because it makes it able to use the layout on your phone.
the lower the width the more it's going to move to phone version.
Related
Please forgive my ignorance. I'm not really a coder. I'm a laid off graphic designer desperately trying to get my portfolio a little more polished than the wordpress site I had.
I've rebuilt from what Dreamweaver puts in when you start a new page with bootstrap 4. I've managed to get a lot customized with some help on here.
But I've broken something in the process, because it was working well until recently.
When I narrow the page, at some point in between the most narrow and a normal desktop size, the navigation exceed the container. When I view the site on my phone in landscape this is the default. I've taken a screenshot (further below) but I also have linked the site directly below.
Is this a media-query thing? I just don't even know where to look for this issue to resolve it.
My site, such as it is
Also!
Not as crucial but I'd love to fix.
a. How can I make the black band under the navbar stretch to the entire screen when it is at it's most narrow?
b. Is there a way (that I can manage without screwing things up) to make the container holding my banner and the navigation be black all across at it's most broad?
Thanks in advance!
Clare
Misbehaving Navbar when narrowed
1.5cm of padding I don't like when at the most narrow
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.
Check out my site here to see the issue across different size screens and on mobile.
I originally used the Luna theme in Bigcartel, having modified parts to make it bespoke to our brand. Whilst doing so the Luna responsive theme no longer worked... having not changed it one bit (Something in my actual code must have caused it to stop working)...;it would just show a blank white screen (mobile).
I then copied and used the responsive style of a separate theme, which causes my site to act like the normal site on a mobile etc... however the headers/footers are all out of place and mis-sized. I have tried changing all widths to %, but have failed to notice any differences. I had managed to change the size of the flexslider.. so that now it works but I am struggling to change the size of the other major components on the page (including navigation bar).
I am reluctant to post any code in here as of yet... as I'm not sure what to include (I dont want to include all the responsive styles), but perhaps someone could point me in the right direction?
Thanks,
i have a rather annoying DIV problem, im working on dreamweaver CS5, and i have 2 DIVS inside of another container DIV. But they cant seem to stay next to each other on the design view of Dreamweaver, but when i preview them in a browser they are okay, they are only distorted in the design view, its kind of annoying working with them on top of each other.I have tried decreasing the size of the divs, but they just cant seem to stay side by side.! how do i solve this?
There is no substitute for a browser, or browsers as you need to test your site in all the latest browsers. I would switch off design view and have a browser open on the side or on your second monitor if you have one. You can setup scripts / browser add-ons that continuously refresh your browser so you can see your changes reflected.
Having said that, In Dreamweaver I suggest using live view instead of design view.
See that and other useful tips here: http://www.hongkiat.com/blog/10-useful-dreamweaver-tips-for-beginners/
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; }