Used foundation for the first time as i thought it was an easy way to make a responsive site for all resolutions.
Not responsive at all. I would not say i am knowledgeable regarding web design but i understand how things work.
The site works down to an ipad and looks great however on the smart phone it falls to pieces, background image does not fill screen and nav menu is split onto two lines.
Any advice?
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 have a website which is working well on PC. Now I want it can be displayed on mobile phone like following:
Align left and display only 1024px from left.
The rest part:
1) The rest part can be kept and user just only need to drag to see the content. This will be the best, and if this happen, it is only need to do some zoom in and out work. But I found it is really difficult to make it working properly on all mobile web browsers.
2) Do not display the rest of part. This is also an acceptable option.
Thank you very much if you can give any advice.
Sure you can do almost whatever you want if you adjust your website to be responsive to different screen sizes and user agents. Media queries will help you adapt your website greatly to different screen sizes, media types and orientation
I would highly recommend converting your website in to using Bootstrap. It makes it responsive, so you should not have any trouble with the mobile view at any point.
From the developers view the Bootstrap offers many and much more to the website creation. No need to hazzle around with the percentages or make entire new pages for mobile phones, one page does it all.
I like to use a lot of unique graphics on my pages, which often results in making different page sizes depending on available screen width/height.
Here are two examples:
http://www.uvm.edu/~areid/homesite/ - the image floats at the bottom of my screen but on a larger browser, the image floats near the middle making it look off. It looks best when the bottom of the window aligns with the bottom of the image
www.stevenlebel.com - it loads two different pages depending on what monitor size is detected.
This seems like a lot of redundant coding. My question is, how can I make sliced/Photoshop images transition well to different screen sizes. Does Photoshop allow you to make DIVS instead of tables?
Can i make each of the slices created by Photoshop grow/shrink when the browser window size changes?
If anyone has any input on creating websites like this I would be very interested to hear what they have to say.
Thanks
Katie
Using a combination of media queries with properly selected breakpoints, sprites or individual images, and even a library like foresight.js you can achieve the results you're looking for.
The media queries will allow you to set up your site for different screen groups with breakpoints set to cover most tablets, phones, etc. You could then load a different image version from a sprite or a separate image entirely. Finally, foresight.js will look at screen resolution and available bandwidth to load higher resolution images for retina browsers if so desired.
set the page size as
.page
{
width:100%
margin-left:auto;
margin-right:auto;
}
Take a tour on mediaqueri.es and find out how others have solved your problem and don't forget dribbble also. I think you know about web designing for PCs, others are smart phones, tablets and TVs. Get some basic understanding of the user interfaces of apps on mobile OSes. Read the Android Design, App Design Strategies for iOS and Designing UX for apps for Windows 8. After that I think you'll have a proper design to solve your question. Then learn about css3 media queries, start coding with html5boilerplate and start from the mobile design. Good luck!
My site's CSS is currently taken care of by Twitter Bootstrap, and it looks/works great at high resolutions such as the one of my 1920x1200 monitor. However, as soon as I go to a smaller device such as a smartphone, and even my very high resolution iPad 3, I notice all sorts of quirks that were simply not there on my computer screen. I can of course simulate them by resizing the browser window down horizontally.
The quirks are generally some form of random resizing (the images will resize before the header text) and eventually everything turning into one single big column, which is pretty much useless and inscrutable to anybody browsing the site.
How do I make the site look exactly the same on smaller screens? Look at apple.com and nest.com and you'll notice that they're both identical on any device you use to visit them.
I know it's Bootstrap trying to be more responsive/fluid, but I feel like that unless I spend a considerable effort fine-tuning that behavior for different horizontal resolutions, I'm much better off showing users the same version on any screen. Is there something I can turn off in Bootstrap that will prevent the smart stacking of spans and will preserve the same shape everywhere?
Thanks a lot!
I am sure you have all come across this before but I just wondered if there were any new techniques out there.
I have been making a design for a client and they want everything 'above the fold' basically so that the pages fill the screen without scroll bars. I have explained that people look at web pages in browsers at different sizes and resolutions of different sizes etc etc, but this is what they want.
So I made a design that fit the viewport of Firefox at 1280 by 1024 which is the most common size.
Inevitable the client is now moaning that when they view this on their laptop screen 'the bottom gets cut off' so I change the design to fit 16x9, but then 'theres too much space at the bottom on the desktop now'...
I then stupidly showed them the ctrl+ zoom on Firefox, and they said, 'Thats exactly what I want, I dont want the layout or proportions on the site or text to change, I just want the whole thing to scale as it is to fill up the space'
I told them that I didn't think that was gonna happen, but I just thought I'd ask the community if they had any new answers to this unfortunately common request?
I think you're looking for a liquid layout