Scenario :
I am working on a mobile web version of my website
Problem :
When the design is running on my own laptop
it looks perfect but when I put my HTML files and open on another
laptop of my friend, the design is totally different and super messy.
For example:
font-size is messed up.
absolute positioned div is not at the position I set.
sizes of input fields messed up.
The overall issue is that the UI design looks perfect on my screen but different on others, even with same screen width and resolutions.
Using : Bootstrap 4 to design the UI.
Open to all suggestions, Please suggest.
Thank you.
You might consider using something like Normalize.css or CSS Reset to minimize the difference between the default stylesheets on browsers and different operating systems. Stylesheets like these give your sites a consistent starting point, removing any custom styling which may be added by the browser publisher or computer maker.
Just add the stylesheet as the first <link> in the <head> of your index.html and it should give you a good starting point. There may be some display inconsistencies afterwards, due to hardware or operating system differences, so some minor tweaking may be necessary.
Related
I'm trying to build an app that looks great on all devices but I'm having an issue with the responsiveness, actually I have a dought for what should I do. so here is what I'm thinking about:
1- If I build the app using the device toolbar which means I start with a media querie of 320px up to 1440px
like this :
and that's what I did actually and everything is going Ok at least that's what I thought but when I use the viewport width ( increasing, decreasing it) I see some unexpected results
this is on 605px viewport width:
I built this app with absolute positioning and I applied a position relative to the img in the background, maybe this is bad practice I know , please note that the app looks great on all devices that the device toolbar offers me.
some of my friends adviced me to use a framework and get rid of all these headaches but really I wanna practice vanilla CSS very well please consider that this is my first app and I'm doing my best to make it look great on all devices
so my question is:
should I leave it like this because logically If it looks ok on the
devices like Iphone 6 ... (the devices that the device toolbar
offers me) I don't need to address the viewport width issue.
or should I use a framework and I don't like this solution I know
it's feasible and as I told you I wanna practice vanilla css.
or should I use another technologie like flexbox or grid system and
this is the hardest solution I think because I'm gonna rebuild the
entire app, but it's ok.
and the last thing I wanna ask about is: is there anythings should I be aware of in my future projects especially if I'm working with vanilla CSS
Congrats on building your first app!
1) When posting questions on Stackoverflow, it is always helpful to provide either an example of your code directly in your post, and/or to include a link to a running version of your code on a site like jsfiddle.net, JSbin.com, codepen.io, etc.
2) For most responsive apps, there are almost always a couple of widths where things do not look exactly perfect. These points are usually right before/after a breakpoint transition.
3) In general, you don't want to use position relative or absolute for handling page layout. There are a number of situations where they can be helpful, but I think its safe to say that they should never be the first thing you reach for when trying to create the layout of a page.
4) Right now, the best way to handle page layout with regular CSS -- no library -- is probably Flexbox because of its versatility and adoption of all major browsers. I highly recommend you learn it and become familiar with it.
5) There is nothing wrong with using a library for general page structure stuff. Because of its use with a ton of companies, I highly recommend you become familiar with Bootstrap -- specifically its grid framework. If you do go this route, read the rules for certain things very carefully. For example, I cannot tell you how many people have their apps look screwed up because they don't follow the cardinal rule of Bootstrap's grid system: The only children of a row should be col. Say that 10 times.
Best of luck to you!
https://www.codecademy.com/Jack-Aaron/codebits/vL8j7y/
This is a site I'm working on. All the code is there. It looks pretty nice in the editor's browsing window. However, when I copy-paste all the code into an index.html and style.css file respectively on my computer and then open that in a browser, the styling looks completely different. The image is misplaced, the sections are different sizes and it just looks wrong. Why is that?
I think this may have something to do with the answer:
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
That's how I load Bootstrap into the page because that's what I was "taught" by Codecademy. Does this work outside of the Codecademy browser?
welcome to Stack Overflow! Now, that is how it will work. The reason it looks odd is because your whole website is designed using pixels. That will make it look funky on all screens, EXCEPT the one it was designed on.
To make it look correct, you should (NEED) to use percentages. Now, why it looks weird on there, and other places? They all are different sized places, like for instance, on Codecademy it is a small preview window.
Yes, it will look funky, use percentages, not pixels.
I recently took up web programming, and this issue plagues my site. I set all the font sizes using px values in css and aligned everything using divs, absolute positioning, and more px values. It looks fine until I try zooming in and out, at which point the text size and page size decrease at different rates, resulting in comparitively huge text when zoomed all the way out. This also renders viewing the site on a mobile device completely impossible. I've read that font sizes should be specified with ems not pxs, but that didn't fix it.
What is going on?
It's an easy problem to get into, particularly for a beginner. Consider moving divs to percentage values etc. In terms of mobile viewing and standard desktop browsing, I would suggest you try using a grid system.
One popular example which is very easy to use & I think is great for beginners is 960.gs
I'm afraid without code snippets and your question being very generalised, its unlikely we can help.
There are also ready to go grid systems that shift the page around depending on screen size but I wouldn't recommend them until you are comfortable using 960.gs
I would also try http://twitter.github.io/bootstrap/, it makes it very easy to create a nice looking site. As redditor mentions, using pixels can result in weird behaviors when zooming especially for positioning elements. I would try to use something like bootstrap or 960, or one of the other grid systems.
I'm kind of sure this is not possible but I ask because it seems unbelievable.
I have some elements styled for reponsive design
img {max-width:100%;height:auto;}
but the images have to be different depending on the device (I won't load heavy wide screen images on a phone device).
Since media queries aren't supported inline, I could go for a css background solution, but background-size is not perfectly supported and honnestly it would look more like a hack.
Can anyone confirm that "widely supported device related responsive images" are not properly possible ?
Thanks
If I understand your question correctly, you are looking for a way to deliver a different image depending on the viewpoint.
Adaptive Images could be the solution you are looking for. Easy enough to setup and confirm.
A second possiblity which might give you even more control is Adapt.js . I've used it with good success on several sites. You load a small javascript file in the head of your document. This tests viewpoint width and then dependending on the results, it will send the appropriate CSS file. It has wider browser support than #media requests.
If you could live with using background images, then it would work well, and since you could specify different images for different viewpoints, you aren't up the creek with browsers that don't understand background image sizes.
Good luck!
You could try the Responsive Img jQuery plugin.
It's made to automatically create and swap in different-sized images at different breakpoints, based on the container's width.
If you already have different versions on your image created and on your server, the plugin will just swap those in at the right breakpoint sizes.
Therefore, you can create new images for all the different breakpoint sizes you want, and the plugin takes care of the rest.
It's not CSS, but it gets the job done.
2014 update
There is a nice and new technique here :
http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
It requires a small js, a 1x1px blank image, a few extra markup for img tags, and some .htaccess rules.
Seems to work fine so far.
I'm very new to web design and just made a simple one page website for my iOS app here. I now want to make it so that when this page is opened on an iPhone, the whole thing is zoomed out enough because right now the right half of the page doesnt show. From my understanding and research so far, I need to use media queries and create a separate CSS stylesheet for mobile. However I feel like for such a simple page there should be an easier solution with some plug-and-play code. Something consisting of a simple conditional-type statement checking if the user is on mobile, and if so, gives the new dimensions of the page. I don't really know anything except for the very basics of html, css, and javascript when it comes to web development, so simple explanations would be highly appreciated.
I think you have to go for http://www.jquerymobile.com it is very good framework for mobile web.
Instead of creating a mobile-specific page you might want to experiment with the viewport meta-tag. The tag isn't used by desktop browsers, but it scales the size of what you see on a mobile device's screen. You can also check out Apple's guidelines for more information.