I am trying to make the design of my website https://take-note.com responsive. I was able to get most of it done except for a part that uses a grid based layout. There are 4 columns of images at the bottom of the page titled "notes", "memes", "field notes" and "front page news". I would like these to appear one below the other on a narrow mobile device. I tried to set the width to 100% but that does not seem to do it.
Any advice from CSS gurus?
Use the media query here like this:
#media (max-width: 767px) {
div.cell {
width: 100%;
margin-left: 0 !important;
}
}
This will make the 4 columns to be below one another in devices with width less then 768px; you can adjust this accordingly to target devices as per your use case
Related
I have a resonsive website build with wordpress and woocommerce (https://oliv-collection.com/). Under 400 px, the store (at the bottom of the page) is displayed with juts 1 column instead of 2. What additional CSS can I add to avoid that from happening, and continue to show 2 columns even in low res devices?
Thank you!
Try adding #media queries into your CSS.
#media (max-width: 400px) {
your-column {
width: 50%; (You can try different sizes.)
}
}
Take a look at: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I have an element that is attached to the bottom of the screen correctly. using bottom: 0
however, when I move into mobile view I still want it roughly the same height but I want to be able to scroll down to view the rest of the element, almost feels like I need to remove the bottom attribute
I'm using media queries but not sure how to get the desired effect I want. coz if I remove bottom from the media query, it will just carry on applying it
any ideas?
Use media-query:https://www.w3schools.com/css/css_rwd_mediaqueries.asp
See here sizes:https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
#media only screen and (max-width: 768px) {
yourElement {
bottom: unset;
}
}
I have two category blog layout pages on my guitar website. The intro article images are set to "float: left" which makes the design work on devices with either really small screens or if they have larger screens/flipped screens to horizontal mode.
In vertical mode, on large phone screens, the text wraps around the image in an odd way. Here I would prefer if the text simply just skipped to below the image. You can see what I mean here.
The first example is the effect that I'm after, but on iPhone 6 and nexus phones the wrap effect is unwanted.
Is there any way to make this happen using CSS?
I have tried usin the min-width CSS property but it does not have any effect.
Using Joomla vs 3.6.5, protostar template.
I found two solutions:
.pull-left.item-image {
float: none; /* option one */
width: 100%; /* option two */
}
Only float or only width (or both) will solve your problem. But, please note this will affect the image, not only in the mobile view. So you need to play around with the window's width and see what's the maximum height for the change. then, use #media on CSS (lets say you want it to apply for every screen that is thinner than 450px:
#media screen and (max-width: 450px) {
.pull-left.item-image { ... }
}
I want to make a media query to target just my phone. What breakpoint(s) would I use?
For instance, my body max-width is 800px wide with 2px margins. When the window is less than 800px (mobile?) i want the margins on it to be 0px (this works on my browser). Turns out that my phones screen is hi-res and therefore the width of the display never goes below 800px!
Is this because of pixel ratios?
What do I do?
The meta-view-port tag changes how websites are displayed on your phone, or other small screens that may want to 'adjust' a website for you.
Some screens, for instance - an iphone 5 - with no meta-view-port tag, will size the website to fit your screen / but like a little version of your website zoomed out. https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
A combination of a view-port tag, and a media-query in your styles would allow you to change your style rules depending on the screen-size. It's kinda best just to make the breaks where things get ugly and not based on the screen sizes of "Today" that will change next month.
I would suggest building from the smallest screen first and moving up as you go with styles like this:
html {
height: 100%;
background: blue;
}
#media (min-width: 400px) {
html {
background: red;
}
}
#media (min-width: 850px) {
html {
background: green;
}
}
etc.
https://jsfiddle.net/5qhmrym5/
If you already have your site built.. and you really want to target the smaller screens, you can use max-width instead of min-width - but I've found that it takes more time and energy to override styles on the way down - then it does on the way up because styles get more complex for larger screens.
#media (max-width: 850px) {
/* styles */
}
If what you want to change is margin value when viewed on mobile you should design your display for use on any screen above the mobile size, 800px wide for you, then create a media query, similar to the ones in the link commented by #Hynes, which changes just margins to 0px.
You are correct in assuming your device is 800px wide due to ratios, but it also has to do with resolution, which are similar topics here. If you imagine a sports jumbo screen, a pixel is nearly an led in size, vs a 1080px display laptop, where the pixels are nearly unobservable. Ratios and resolutions are the reasons displays are tricky to make, and why values such as em's and percentages have come to be, to bypass the differences in display. This is also a large reason of why media queries are so useful
html {
box-sizing: border-box;}
*,*:before,*:after {box-sizing: inherit;}
Try using box-sizing: border-box on your css and also percentages, this is the way I like it, but surely you will find plenty of information about it, just google it.
Found the solution: https://stackoverflow.com/a/18500871/5906166
You need to include this in your header:
<meta name="viewport" content="width=device-width, initial-scale=1">
Explanation:
Fortunately, you can specify a viewport meta tag in the <head> section
of your document in order to control the width and scaling of the
browser's viewport. If this tag has a content value of
width=device-width, the screen's width will match the device
independent pixels and will ensure that all the different devices
should scale and behave consistently.
I am trying to make my website work on different screen sizes, I am new in this area and could use some help.
What I am trying to accomplish: Making my website work on different screen sizes without sizing down the content. I have a website close to YouTube's layout and would like it to size down the same way YouTube has it. It simply get's less and less white space on the right and left to more the screen size goes down, Making the website look the same whatever screen size the user may have.
How could I accomplish this?
Put your entire content inside a container like <div id="wrapper"></div>
Then in your css:
#wrapper{
width:960px;
margin:0 auto;
}
Other than you have to start using media queries or adaptive design to create a responsive or fluid layout.
Best practise is to begin with the smallest resolution you want to address and build up from there.
But for the beginning it's best just to work with a fluid layout.
Simplified:
#wrap {
width:90%;
margin:20px auto;
max-width:960px;
}
Put this around your whole content and let content have a width of 100%.
Now you can start and build for smaller resolutions with the help of some media queries.
I'd suggest use just two, one for tablets and one for everything smaller than one.
#media screen and (max-width: 767px) {
/* ALL < TABLET */
}
#media screen and (min-width: 768px) and (max-width: 1024px) {
/* TABLET */
}
There are some great precoded template for responsive layouts but those can be a bit overwhelming in the beginning. If you want to try your hand with some I'd suggest the following:
http://twitter.github.io/bootstrap/
https://github.com/malarkey/320andup/