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/
Related
I'm building a personal project website. I want to make it so that all devices (including mobile) view the desktop version of the website. Is there a simple way to do this with just HTML and/or CSS? I have seen other questions on here asking the same thing, but none of the responses worked for me.
Asign your widths and heights as percentages for example width: 50% so that it will not have a fixed value.
If you want a navbar, you would probably use flex-box.
Here a good tutorial on that: https://www.youtube.com/watch?v=PwWHL3RyQgk
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
For the life of me, I can't quite figure out how this template is responsive without any extensive use of media-queries.
https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
Anyone have any ideas?
I bought this template, and the responsiveness kinda broke while I was applying it and the author is not responding to emails.
I can't quite figure out how this looks so elegant on small screens particularly.
A webpage doesn't need to use media queries to be responsive. Responsive by definition means the elements adapt or "respond" to your device or screen size, instead of using a fixed or pre-defined width/height/arrangement regardless of the viewing device.
The link you pasted is certainly a "responsive" site, and they achieve this by allowing elements to have a fluid width (only with a max-width on the container, to make sure it doesn't keep growing if you have a very large screen, since that would look funny).
The way they do it makes your CSS code very simple and uncluttered from various viewport pixel definitions and media queries.
You can simply set max-width to prevent an element to be wider than required on large screens. Here is fiddle: http://jsfiddle.net/ur3futxp/
The site uses twitter bootstrap to make the site responsive. Bootstrap by default makes a site responsive using media queries if you use it grid system. Please refer the documentation http://getbootstrap.com/css/
This site is using twitter bootstrap framework which is developed to make the site responsive with all the devices without using any media queries as it already have predefined all the media queries in its framework and if you want to any more things to get responsive you must add your classes in your style.css file and make it sure that it will not conflict with twitter bootstrap predefined classes and you can do that by reviewing this site
http://getbootstrap.com
The issue:
I'm working simple html website that I want to work on any web browser size, so basically if you resize the browser the website will resize to and you won't have to scroll horizontally on the webpage.
I am assuming this has to do with CSS, I've been going thru my html book but unfortunately it doesn't cover this, I've also tried googling but I don't really now how to put it in words so basically google doesn't help me, at least not until I know what this is called.
The word you're looking for I guess would be responsive design / css.
If you are ok with reusing existing frameworks I'd suggest you try:
lessframworkd
responsive grid system
gskeleton *
bootstrap *
* are fullblown frameworks that include a lot of other features as well
Or have a look at this nice collection
You might be looking for these words:
CSS GRID SYSTEM ยป http://960.gs/
ADAPTIVE CSS DESIGN
FLUID CSS DESIGN
or even
MEDIA QUERY CSS
I'm building a responsive site and I have it set so that when the site is viewed on a mobile phone, I will hide certain code via Bootstrap's "hidden-phone" class. I am using this feature for a heavy slider that I don't to be shown on a mobile phone. But, does the code actually not load or does it load but is not visible? If it does load but does not become visible, I don't see what the point of that is...
Thank you.
Maybe you should think of replacing your slider with a different element instead of hiding it.
Also,this might help you:
how to use responsive features of bootstrap 2.0