I am using this template: http://fluidbaselinegrid.com/ to create fluid grid to layout my personal site. Not all my grids are the height and I sometimes get the wrong placement.
[1].
The skills section should be on the left under Blog Post 5 and Contact should be next to skills.
Please see my site at http://vsrao.com.s3-website-us-east-1.amazonaws.com. And you should be able to access the css and html there. I would be too long to paste it in this post. Please let me know if this is bad etiquette. Also let me know if there is a better fluid grid framework that is upto date.
You can probably tackle this by applying a clear: left via an nth-child selector on your columns. Using your media-queries, you should be able to mimic 2 or 3 column layouts like so:
// 2 column layout
#media only screen and (max-width: 767px) {
.g1:nth-child(2n+1) {
clear: left;
}
}
// 3 column layout
#media only screen and (min-width: 768px) {
.g1:nth-child(3n+1) {
clear: left;
}
}
Note: You'll need to add a new media-query (max-width: 767px) so the clear on 2 column layout only gets applied to your smaller screen view.
Related
We have a section on the page that needs to be hidden on small phone screens, and appear on larger screens.
The easiest way to do it would be to use CSS media queries.
.section {
display: none;
}
#media (min-width: 900px) {
.section {
display: block;
}
}
However, this would keep the section in the DOM, thus potentially making it less efficient.
Alternatively, we could toggle the existence of the section using a state in our JavaScript framework (React in our case, but not important for the question).
My Question is: When is it better to use one, and when is it fine to use the other?
Summary: I am attempting to design a restaurant menu. When viewing the site on a desktop the user should see the entire menu i.e a category ('Appetizers') and all of the food entries in said category('Fried Calamari', 'Mozzarella Sticks', etc). However, when viewed on a mobile device I would like the entries to be hidden and the food categories to be buttons. When the 'Appetizer' button is clicked, the user should then see 'Fried Calamari', 'Mozzarella Sticks', etc. I feel like I am going about implementing this in a convoluted way. My code:
index.html:
<div class="food-section-heading" id="appetizers">Appetizers</div>
<div class="menu-item">
Fried Calamari
</div>
<div class="menu-item">
Mozzarella Sticks
</div>
using javascript to hide what's normally there and present the button:
/* Function definitions */
function hideElements(className){
elements = document.getElementsByClassName(className);
for(i = 0; i < elements.length; i++){
elements[i].style.display = 'none';
}}
function showElements(className, displayType){
elements = document.getElementsByClassName(className);
for(i = 0; i < elements.length; i++){
elements[i].style.display = displayType;
}}
/* Main Program */
//if iPhone X or smaller hide '.menu-item' elements
if(window.screen.availWidth <= 375){
hideElements('food-section-heading')
hideElements('menu-item');
}
/* Code to create button and show elements upon click event not included. I stopped writing it and came here because I feel I can't be doing this right*/
Is there any easier way to go about this? (A good example of what I am talking about is grubhub.com on mobile vs what grubhub.com presents on Desktop.)
There are many ways to go about displaying the same document differently on different devices.
When targeting desktop / laptop / tablet / mobile a usual starting point would be to choose whether you want to detect:
the browser viewport size / viewport orientation / device screen size; or
browser make and version; or
data related to the browser's touch capability
Then, you can use:
CSS #media queries (commonly used in Responsive Design)
Client side browser sniffing (via javascript)
Server-side browser sniffing (used in RESS / Responsive with Server Side)
Touch detection (again, via javascript)
and more.
Targeting via CSS #media queries for screen size
One of the more easily-implemented approaches is to deploy one or several CSS #media queries.
Here is a simple #media query targeting screen sizes which are 800px wide or narrower:
#media only screen and (max-width: 800px) {
.menu-item {
display: none;
}
}
Adding in #media query hover: hover | none
If you want more sophisticated targeting (e.g. in a situation where you don't want to target narrow browser windows on a desktop / laptop) you can target the screen size (as above) in combination with checking if the screen supports a hovering action (on the basis that if it doesn't it's very likely a touchscreen):
#media only screen and (max-width: 800px) and (hover: none) {
.menu-item {
display: none;
}
}
Older approach using device-size #media queries (not recommended)
Before the #media query hover: hover | none arrived, if you wanted more sophisticated targeting, you could target actual device sizes with a #media query:
#media only screen and (min-device-width: 320px) and (max-device-width: 480px),
only screen and (min-device-width: 320px) and (max-device-width: 568px),
only screen and (min-device-width: 360px) and (max-device-width: 598px) {
.menu-item {
display: none;
}
}
But in practice this tends to be less useful and harder to maintain.
I think you might find some useful information in this thread.
Writing for mobile is very different from writing for desktop. It would likely be best if you used a router to direct users to one page if they are on mobile, and the one you've already created if they are on desktop.
I am using the ParticlesJS package for my ReactJS application. It displays at the beginning. I want to hide it when the screen size is under 600px. It sets the display to none, however when the screen is resized back above 600px, the particles element doesn't set display back to block, so it's not displayed again.
html/jsx:
<div className="particles-container">
<Particles params={particleParams} className="particles" />
<div className="home-banner-content">
<img src="./src/style/img/logo_banner.png" />
</div>
</div>
css:
#media only screen and (max-width: 600px) {
.particles-container .particles {
display: none;
}
}
#media only screen and (min-width: 600px) {
.particles-container .particles {
display: block;
}
}
After digging in a bit I saw that the Canvas's height is set to 0 when display: none; is set via the media query.
I'll have to dig in more to get the correct answer to as to why that might be happening. Will return with an update to this answer with a proper explanation regarding this.
Continuing, when your media query sets display: block; the height of the canvas still remains 0 and thus you are unable to see it.
To fix this you can either listen to window resize events inside the javascript code (in case you're resizing).
But in case you're going to fix this for mobile then you can check for window width inside the javascript itself and conditionally render the Particles component.
Also, if you provide a "fixed" height to the Particles component as a prop, your media query will work.
Here, you can see a demo: https://codesandbox.io/s/rw8666x11o
I know this question sounds crazy, but I'm going to explain it.
I have a responsive website and all works OK, but when the width is too low (width < 500px) the website (which is still responsive) start to rearrange in such a way that I prefer to NOT being responsive anymore.
I'd like to know if there is a script or anything that can solve this. Please any help will be useful :)
set a minimum width on the html / body
html, body {
min-width: 500px;
}
Making elements responsive is usually done by setting width to a percentage of parent elements. The above would be an easy fix, but it's possible there will be elements you need to style using media queries.
You can place your css within media queries so that it only applies under particular conditions. E.g.
#media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
something like:
if orientation = landscape {
hide divA
else
show divA}
excuse non script example, thought it would be easier to explain that way as not too sure the best way to go about it
Yes you can do this with css media queries.
jsfiddle demo (Make the width of the html view smaller and see what happens)
#media all and (orientation:portrait) {
/* Styles for Portrait screen */
}
#media all and (orientation:landscape) {
/* Styles for Landscape screen */
}