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
Related
I have troubles regarding a slider I have on my website.
Currently it's a slider with the <img> element. Problem I encounter now is that on mobile the large images get loaded as well. Now I want to load specific (smaller) images for mobile so that my website is faster on these devices.
A solution I had was using the media queries in combination with CSS background image. This is perfect to use because I can load the images with CSS and thus can use media queries to select the image based on screen size.
But the problem is is that I want to add the images to the SEO, they are essential for my website and I read everywhere that if you have such images, you need to use the <img> element. So that the SEO can work and include these images in the content. Also I cannot add ALT tags to background-image.
Another solution is rendering two sliders, one for mobile and one for desktop, and hiding the slider you don't want to see. Problem I have with this solution is that both of the sliders need to render, thus decreasing performance.
Is there a solution that I'm missing here? In my understanding you cannot change images in a <img> element with CSS media queries.
You can use the picture element. As the Mozilla Developer Network says, "[This element] serves as a container for zero or more elements and one element to provide versions of an image for different display device scenarios". I think it does the trick. Here you are another good article that explains how to use this element to achieve the result you need with your responsive images.
The picture element is a really nice modern solution. But if you want something more cross-browser, consider an approach with JavaScript. My solution for some websites was using sets of images with regular suffixes, for example image.jmg, image-medium.jpg, image-small.jpg, and a script checking the screen resolution. In the HTML only small images are included, but if the script finds the screen is big enough, it updates their src with corresponding suffixes.
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
I'm using rails and bootstrap and I'm using the bootstrap carousel on my landing page. I found that on the mobile view the carousel starts to look quite bad unless I make the pictures much higher than wide.
I wanted to use an if statement in my erb file to check the viewport size and render the appropriate image. I don't think using media queries in css is appropriate in this case as the image size determines the size of the carousel (not simply a background image).
Sorry if this is a newb question.
Erb is rendered server-side, which really has no notion of the viewport size, you would need to resort to using javascript in conjunction with your code, to make the adjustment.
This seems like a perfect case for media queries in the css. This is a much cleaner solution than muddling around with js.
You can, in the carousel, draw both of the images. Give all the wide images a distinct class (wide-image, for example) and all of the tall images a distinct class (tall-image, for example). Then, in the appropriate section in your css, simply set the undesirable image class to display none, which will effectively leave you with only the appropriate images displaying (and governing the size of the carousel).
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
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