I'm trying to get a website I am working on to resize for different screen resolutions. It's currently set up for 1080p, but I want it to act like a normal website and resize to any resolution.
I have got all the content and links done, it's literally just the size of the website I want changing.
If anyone could help that would be great, thanks.
You can use media queries to make your page adapt to different screen sizes or you can use an existing responsive framework like Bootstrap http://getbootstrap.com/.
Since you don't have an example, this link might be helpful for the solution you are trying to achieve (the css style answer in particular):
Dynamically resize div based on size of browser window
Related
Im relatively new to web development working on creating a website using React JS.
Im really not able to figure out how I can make the elements on the website resize or arrange themselves nicely when the window gets resized, or appear like when viewed from a mobile device.
Like all the elements adjust themselves based on vh and vw when the window size decreases/increases diagonally, however if the vh stays the same and vw changes, everything ends up all over the place.
Are there any plugins or anything ReactStrap related that can help me achieve this dynamic resizing and fitting? OR should i use tools like wordpress which seem to automatically take care of this issue rather than me manually writing all the HTML and CSS for the website.
Thank you
You can use Bootstrap to create a Responsive web-page. For React users they have the React bootstrap, without jQuery dependency- https://react-bootstrap.github.io/.
Please try this for a fully responsive webpage. For a responsive grid layout you can use Bootstrap grid sysytem - https://getbootstrap.com/docs/4.0/layout/grid/
#yolopolo you could also do that by learning how to make a website responsive depending on the device's screen. Please check this one out: https://www.w3schools.com/css/css_rwd_intro.asp
and test your webpage responsive by learning Chrome's Device Mode in Dev Tools
https://www.atlantic.net/hipaa-compliant-wordpress-hosting/how-to-test-responsive-design-device-mode-chrome-developer-tools/
I created a page in html page from my PC here is the link http://evaluations.tk/.
My question is do I have create separate page for both mobile and pc, if I have to create separate page then how can I set different previews for pc and phone. For testing I added meta tag but when I see that page on phone it make the objects very large. Can anyone help me...
No need to change in program.but you need to apply bootstrap css to all pages.
Bootstrap basically does is adjust the size of page as per the size of the screen..
Thanks Vote :P
Like Yogesh Suthar's answer; bootstrap is your friend when dealing with responsiveness of your websites. By the use of the column grid structure, you can make your site responsive to different screen sizes. If you would like to have some more customisation, you can also create bootstrap-like behaviour with css by employing media queries (e.g. #media screen and (min-width: 400px){color: red;}). Basically, you define the layout for mobile first and then gradually add styling for larger screen sizes.
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'm having a problem with a website I've built: whenever I view the site on a smaller monitor or when I resize the browser window, the content gets covered by the other divs. I need the content to be fully visible, no matter what size the browser is.
http://sophisticateddesign.nl/cfreport/overons.html
Also, on the homepage the text gets cut off a little bit on the bottom row when I resize the browser. I need this row to increase in height a bit, which apparently can't be achieved by simply increasing the divs' height.
http://sophisticateddesign.nl/cfreport/index.html
You should take a look at responsive web design. By using a fluid grid together with one or many media queries you can achieve what you're asking for.
Here's a good introduction if you'd like to get started. I can also highly recommend Ethan Marcotte's book about the subject!
The simplest way is not to define widths in pixels but using only width in %. You defined for example width: 960px; for <html> so if the browser window is less than 960px the whole content of this site won't be visible. You also defined the footer width and probably some more elements.
But the true is nowadays you should learn rather Responsive Web Design to create your page adjusting to device width. Many sites are being used by people on PC, laptops, tablets and mobile phones and you cannot create complex site to look nice on all those devices without using responsive design techniques.
I need to put together website for mobile devices, so iPhones and various androids. The problem is I struggle with getting viewport right and other settings. My goal is so webpage would be coded for specific width e.g. 640px wide. Then once open device would zoom it in/out to the width of the screen so everything became larger or smaller same like after zoomig in/out via pinching on the device screen.
So I would like to develop it for lets say 640px width and depending on device it would scale up or down once open. So if device screen would be 960px wide it would automatically scale to this width via viewport somehow. Is this possible at all to have it coded for predefined width in css and have zoomed in/out as needed by device itself?
I apologize if the question is too generic, will explain details if needed.
EDIT:
So the most common approach if I understand correctly is to provide few layout versions for most commons screen sizes? Using media queries in css provide different values for widths, fonts sizes etc is that right?
If I decide however to go with percentages rather than media queries, given the design provided I think still would have a problem with resizing fonts as layout has images with text in it and text needs to be proportional to the image. Also percentages would take care of widths, height might be an issue though as the images would have to be resized vertically too. Some parts of the design would need to "fit" each other it seems and it would become problem I think.
Now if I simply build a website of certain width, lets say 640px I should be able to position everything on the screen with pixels, no diffeent from normal non-mobile website.
So I tried to set <meta name="viewport" content="width=640"> and inside of a page set width of widest container in css to 640px making page width 640px basically. If I understand correctly it will set up viewport to exact width of the page. So the page would be build as any other non-mobile webpage. User will have to adjust scale by pinching as when the page opens it is usually zoomed in/out for some reason. Is my understanding of what is happening here correct or is there some problem with it. Having it predefined size takes care of different mobile screen sizes as viewport is always same, fits into page width and only scale seems the problem, that is unless I'm missing something here.
I also should have mentioned that I need to do only portrait and make it only option, so no landscape view (that will be another question).
Would love to know your thoughts and I appreciate all the answers so far.
This is called Responsive Web Design when a website adjusts according to screen size...
You can make this kind of responsive website easily through CSS3 Media Queries:
How to write CSS Media Queries for common types of devices
Responsive Web Design: What It is and How to Use It
If you google for Responsive Web Design you will find lots more information on this topic. It's really an amazing method to make your website look great on all devices from small to large screens.
We have a series of tutorials on creating web pages using responsive web design. If you want a quick introduction to it checkout Introduction: Creating a Responsive Web Design, it lists common mobile phone and tablet sizes, so it might lead you to the answer you need. You can find the link to our tutorial series in the article. The solutions provided use Bootstrap in order to provide easy to create pages. And it also provides free samples of responsive web design pages.
I hope this helps to provide the answer that you need, if not, then please let us know if we can provide any further assistance.
Regards,
Arnel C.
InMotion Hosting Community Support Team
Specify the width in percentage say width=100%,which automatically adjusts the width with the screen.