I've seen many WordPress themes that adapt to mobile interfaces/smaller screens using only CSS. Any ideas on how it's done?
For example, the theme Foghorn has a sidebar that disappears in a screen less than 750 px wide. I've looked at the code and I'm very sure that it is done with CSS.
I'd like to employ such a design in a website I'm making.
Thanks for any ideas!
You need to use media queries in your CSS.
Example:
#media screen and (max-width: 750px) {
.someClass {
display: block;
}
}
Everything inside that #media block will be applied only if the screen width is 750px or smaller.
You can also do things like min-width or combining both.
Related
I'm not seeing why max-width: 400px is forcing the image to be 400px on small screens for the following site:
On https://compucademy.net/hypothesis-testing-with-python/
Can anyone explain please, and maybe give me an appropriate #media rule to fix it?
Width is being overridden, for mobile specific you can use
#media screen and (max-width: 768px) {
.... CSS goes here
}
You can also use the "min-width" if its mobile priority application/website.
Hope this help.
Trying to develop a webpage with jsps and some css.
Encountered a problem with media queries.
#media screen and (min-width:500px) {
#first_area {
display: none;
}
}
This is the code that I typed on css file that is linked with my index.jsp.
But the section that is wrapped with div tag named id='first_area'
does not change (first area does not disappear) even when screen is smaller than 500px.
I am wondering if this is a problem with my code/ or media queries are only supposed to use with tags that already exists? (ex. div, span)
What I am trying to do is making the index.jsp page responsive.
Please help.
If you want to hide the div if the screen is smaller than 500px you should use max-width instead of min-width.
#media screen and (max-width:500px) {
#first_area {
display: none;
}
}
Currently having issues scaling the text down to a mobile size, as the current parallax image has a text element on top of it and half the text is off screen when browser is resized or on a mobile device. I can move the text around, but struggling to resize it to fit on a mobile screen.
#media only screen and (max-width: 600px) {
.vc_custom_1528382333513 {
font-size: 1% !important;
margin-left: -300px !important;
(.vc_custom is the element name)
Page in question- https://www.xordium.co.uk/your-cloud-journey/
Yes, You can New fonts properties are there please see the link below
https://css-tricks.com/viewport-sized-typography/
First of all, your css rule is not applied to the text in the header. See this image. Try to select directly the span:
#media only screen and (max-width: 600px) {
.vc_custom_1528382333513 span {
font-size:...
Or any other method.
Next, you should use Viewport Sized Typography for better and more accurate reponsivity. For example:
#media only screen and (max-width: 600px) {
.vc_custom_1528382333513 span {
font-size:6vw;
...
The result should look like this.
Not the best look, I know, but try some other numbers until you find something that fits correctly.
Try using other units. eg viewport width.
Try setting the text to eg. calc(16px + 2vw);
Play around with the pixels or viewport width values until you find a solution that scales however you'd like.
check this CSS Tricks article Fun with Viewport Units.
Also check out the CSS calc function. Its quite useful A Couple of Use Cases for Calc()
For some reason, Safari for iPhone isn't reading the responsive CSS, something must be stopping the it...but I can't find a bug or error. I've been through the CSS with a fine tooth comb and checked.
The live development site is at: http://k16.koogardevelopment.co.uk/
The root of your problem is that some of your divs have hard coded widths that aren't scaling down or reseting for narrow viewports. For example you have
body{
min-width:960px;
}
The divs I noticed that need attention are body, #main, #tweets ul, and #branding
Two of your options are to either change the width settings for these elements to something that will scale, e.g. { width:100%;} or use media queries so you can target and change them at specific viewports, e.g.
#media screen and (max-width: 767px) { /*adjust width as required */
#element-you-want-to-target{
width: Xpx;
}
}
Good luck!
Hey could someone tell me if this part of my css is right or wrong?
I personally think it is wrong but this is the only way I can place content in the center of the screen, if I replace the 999px with auto everything goes to the left.
If anyone knows how to write it properly that would be great!
I have been making website for quite a while now but I need to learn the right way.
#wrapper {
width: 999px;
margin: 0 auto;
}
DEMO
If you want that #wrapper stay in the center of your page your code is correct.
You can specify every width you want, but not auto.
If you are looking for Responsive Design, take a look at the #Media Queries
http://googlewebmastercentral.blogspot.co.uk/2012/04/responsive-design-harnessing-power-of.html
Example:
Write your css for normal style, then add:
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
Here you can specify different size and style for browser with that min or max size.
A good tool for start using Responsive Design is: Bootstrap