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
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/
So I have a site built with twitter bootstrap 3. Everything works great and looks good on mobile/tablet as well. What I would like to do is add a link in the footer to allow user to view full site and not the mobile responsive version if they would like.
I know I can change viewpot to force the full site in mobile but I would like to have it default to responsive and should the user choose to want full site they click a link which would disable to responsive features.
I looked around and surprisingly haven't seen much documentation for this which I would think would be pretty popular as most sites have this functionality these days. Thanks in advance
You'd probably have to serve two different versions of Bootstrap, one default and one with a modified variables.less
Have a look at this part of the file:
// Point at which the navbar becomes uncollapsed
#grid-float-breakpoint: #screen-sm-min;
// Point at which the navbar begins collapsing
#grid-float-breakpoint-max: (#grid-float-breakpoint - 1);
You could change it to something like this to never show the mobile menu
// Point at which the navbar becomes uncollapsed
#grid-float-breakpoint: 0%;
// Point at which the navbar begins collapsing
#grid-float-breakpoint-max: 0%;
Call the compiled CSS file maybe bootstrap-desktop.css and then serve this CSS file instead of default if the user visits the desktop site
The easiest way is to toggle the viewport meta tag.
By default have the tag in place.
When they choose desktop mode, add something to the URL or set a cookie to not output the meta tag.
I am trying to put together a simple portfolio site, and have implemented a basic responsive design into the CSS as well (at the very bottom of it), and it behaves just fine - shrinks the 5 columns down to a single column and hides a few elements when I resize the computer browser. But on iPhone/Android browser it doesn't make any difference.
Here is the page in question -> Sample Page
And I can't figure out what the issue is... as in, this should be fairly simple to do, but apparently it's not, and now I'm losing sleep over it... so might as well ask here.
Have you [also] consider the use of viewport meta-tag? Just check This.
I tried loading the site but it seems like your custom js file is not found(404 error).
I am trying to program a website with multiple independent pages and I would like to use the slide transition effect between pages as it can be done with the jquery mobile Framework but WITHOUT using this one. My goal is to make a desktop web site and not a mobile app.
The fluidity and the speed of execution are my objectives. I saw that you can use the jQuery Easing plugin (version 1.3) but I'm not able to place this code for having a fluid transition effects between independent pages.
I intended to do this transition page effect with the TerrenceRyan.com solution but it doesn't work correctly.
I don't want to do a navigation with jquery anchor or hidden divs placed in a long one page, but many independent pages that arrive at their click sliding.
To give you an example of what I am trying to achieve, here are some links:
http://www.craigandkarl.com/
http://www.ultranoir.com/
If performance is key and you don't want to use jQuery maybe have a look at the new greensock javascript library
They have a test page which shows that it performs really well against other similar libraries:
speed test page
I have been using their AS2, AS3 engine for flash for many years now and if the JS version is nearly as good, then I'm sure it will be of use to you.
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.