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.
Related
By the way, I would like my cards in the most popular ones to stop decreasing in size from a resolution of 400px I tried to add a min-width on the card container but with all that the result is nothing.
#media screen and (max-width: 400px) {
.aside-container {
min-width: 400px;
}
}
I don't want my card to decrease in size from 400px
You are using a media query that will only work when your screen is less than 400px wide. You might want to remove that, or maybe you meant min-width?
Notice, that actual rule that is applied to your .aside-container is (max-width: 786px).
I believe that rule #media screen and (max-width: 400px) { is placed before (max-width: 786px) rule in your queries.css. Try to move code down to end of file so needed rule will be last applied to element.
I have no time to verify it right now but I'll get to computer later so I'll check it.
Please look at this website http://www.grupottc.com/ scroll down until the section that says "VALOR AÑADIDO" when you resize the whindow you'll see that the blank parts from the sides are shrinking with the window, how to make that effect, thak you.
Look at the media queries. A website must implement some media queries to match specific max-width or min-width in order to fit the screen size. You may search for some of these queries in the website such as those below, which are only applied as long as the screen width is not more than 767px.
#media (max-width: 767px)
.elementor-column {
width: 100%;
}
#media (max-width: 767px)
.elementor-96 .elementor-element.elementor-element-8g5lbx9 .elementor-icon-box-icon {
margin-bottom: 16px;
}
I have a problem with css and responsiveness i think my website is responsive enough, but the only thing make me confused is the img on my slider.
here is my website : www.spc.id
the img on slider is not responsive i think, because it does not friendly on mobile screen.
i have tried with media queries for resize the width and height:
<style>
#media only screen and (max-width: 639px) and (min-width: 480px){
#home-hero{
width: 480px;
height: auto;
padding:90px;
}
}
</style>
i can customize the height , but why i cannot custom the width ?
Thanks if you do not mind to helping me!
Hard to say without more information, but I notice a couple of things in the source code of your site.
1) Your media query is syntactically correct, but its not clear why you have a min-width rule on it. Unless you have another media query for screens smaller than 480px in width, you should eliminate the min-width rule. Try this code:
#media only screen and (max-width: 639px){
#home-hero{
width: 480px;
height: auto;
padding:90px;
}
}
You can play around with this jsfiddle which should hopefully clarify what I mean. https://jsfiddle.net/8nzatewL/
2) Looks like you're using bootstrap, but you have a typo in your class name. Change:
<div class='contai ner'>
to:
<div class='container'>
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
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.