Is it possible to use a different child theme depending on the browser width?
I realize there are the CSS media queries to change stylesheets, but I'm wondering if it's possible for a phone with like 420px width load the page, and the header.php sees this and points it to a different header file.
If this isn't possible, or if it is quite difficult, I would then need to find a way to get it to point to a specific WordPress page (as it's in WordPress) depending on that width.
In short, with the way I set stuff up, I'm just trying to avoid the CSS media queries.
I apologize in advance if this is something simple or overly complicated. I'm a bit green in programming. :)
CSS media queries are just a way of altering CSS depending on the browser width (which im sure you know), in your case I would use CSS media queries, but if your thinking i dont know what rules to set etc then maybe this reference will help
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
CSS media queries are not complicated, they are just stylesheets for different screen widths
Related
I have a web-app with the front end using materializecss.com framework. It has quite a few data tables throughout. My tables are using css from materialize and I really like the styling. The tables have between 5-8 columns and on mobile you first have to zoom in and then scroll over.
What I'm not sure about is what the best approach is to making this mobile friendly; I've been searching around for code that converts tables into cards and have found some for bootstrap cards but not for materialize. I don't want to hide columns.
I've tried my hand at a few solutions using media query's like: #media only screen and (max-width: 992px)... but I think materialize is overriding them because they are not working. I've tried to mark them !important or search through and modify the materialize css file but it is not working.
How bad would it be to create separate card elements and hide either the table or cards depending on screen size? It's mostly text data and links that are loading so I don't think it would significantly increase data transfer amount.
I'm not a pro at html/css/sass and even worse at javascript so any advice is greatly appreciated!
Adjusting your website in relation to the screen size is called responsive
Try looking for that in your research.
Using materialize gives you the option to the option to define a rowand within that you can make columns and define their size. You can even define the size relative to the screen size.
Try looking into this: https://materializecss.com/grid.html
Materialize also has its own (responsive) table and collection structure that might be helpfull to you.
Also it might be helpfull to use % in your css instead of fixed px
If you this doe not solve your case, try looking into flexbox and overflow.
I hope I understood your problem correctly otherwise some code of yours would be really helpfull :)
I am using React and I am trying to modify the content of a component based on the viewport of the device.
The solution I came up with is to wrap in 2 separate divs the content for mobile and the content for desktop, and then to use CSS "display:none" and appropriate breakpoints to display either one div or the other one. I am sure there is a better and more efficient solution, but I can't find it.
I much easier way would be to use media queries. These allow you to basically alter your CSS based on the size of the browser/device and as the size changes you can decide how your page looks by adding CSS within the media queries.
Take a look at this site for further clarity:
https://www.w3schools.com/css/css3_mediaqueries.asp
I'm building a website, and I found a crazy number of favicon sizes to be pertinent for most devices. Really pretty ridiculous. I any event, I understand how to make my HTML read the viewport size and redirect to other HTML docs and stylesheets as needed, but my question is, how many is needed in this world of 30+ different screen sizes?
Is Bootstrap all I need? I imagine bootstrap is mostly about percentages (height: 5vh; width: 100vw;) etc. Seems easy enough to redo my current desktop site to a tablet and iPhone size screen, but if this is anything like the favicon ordeal, then it would be easier to use something like Bootstrap.
You need ONE website, and you need to use media queries in it - depending on how picky you are, a usual way is to create them for three sizes - one set of basic rules and two sets in media queries (though these only have to contain those rules that differ from the basic rules) for the other sizes (i.e. smartphone, tablet, desktop). (favicons are a different thing).
Bootstrap can be helpful with that, but doesn't have advantages only.
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.
Does anyone know how to accomplish a different layout based on the browser width, like these two sites?
http://sasquatchfestival.com/
http://css-tricks.com/
I've tried to Google it, look through Stackoverflow questions, and look at their code but I think I am missing something. It actually rearranges and resizes some elements based on the width of the window, but how? Javascript?
Sorry if my search skills are just failing, but I'm not really sure what to look up, the "similar questions" here don't seem related, and even CSS-Tricks doesn't have the info in an easy to find place.
You don't need to use JS to detect browser width. You can simply use CSS media queries to alter the layout.
For example:
#media screen and (max-width: 1280px) {
... selector(s) here ...
}
Will apply CSS only to screens that are at most 1280px wide.
See also:
http://www.w3.org/TR/css3-mediaqueries/
http://reference.sitepoint.com/css/mediaqueries
You can use CSS3 media queries to deliver different styles based on the screen width. See here for more info: http://www.css3.info/preview/media-queries/
If you look at the CSS source of the sasquatchfestival.com site, for example, you can see what they're doing: http://sasquatchfestival.com/css/screen.css?v=1328828795. Search for "#media only screen" and you'll see they're delivering different CSS for widths below 768px, between 768-1024px, and above 1024px.
You can reinvent the wheel or merely build/rebuild your web site using one of the many responsive frameworks that are available. I have used both 'Skeleton' and 'Bootstrap by Twitter' Their frameworks can be found at...
Skeleton... [http://www.getskeleton.com/][1]
Bootstrap... [http://twitter.github.com/bootstrap/][2]
I have built sites using each...
Skeleton... [http://72t.net][3]
Bootstrap... [http://ReactiveWebDesign.net][4]
I'm still trying to decide which I prefer, but right now boot strap seems to offer more features.
May be a little bit of jMasonry in there, but it also looks a little like what Twitter Bootstrap provides in rails, it might be worth pouring over their static CSS version for answers.