Using media queries: I can make an image disappear at or below a specified width, no problem using display: none;
The problem is figuring out how to do the opposite, like above a certain width with display: none;
(Say I want a small logo to only show up below x pixels..)
Tried inline style set to display: none; then used a query to try something like display: visible; no good.
Best I could figure was a hack around, initial width and height:0 then use the query to reset the width and height at say, max-width:650px
I played with min-width and max-width I'm doing something wrong, is there an OPPOSITE to display: none; couldn't get min-width to do the opposite of max-width.
You just need to set display:none/block the img according to your needs
As I'm not sure what you really want here is 2 snippets:
snippet with image showing only above 650px
img {
display: block
}
#media (max-width: 650px) {
img {
display: none
}
}
<img src="//placehold.it/600x600" />
snippet with image showing only below 650px
img {
display: block
}
#media (min-width: 650px) {
img {
display: none
}
}
<img src="//placehold.it/600x600" />
Note: display:visible doesn't exist
Related
I don't understand, why this does not work:
#media screen and (max-width: 600px) {
.contentBlockText {
position: relative;
display: inline;
width: 100%;
background: #f00;
}
}
.contentBlockText {
position: relative;
display: inline;
width: 66%;
background: #fff;
}
The result always showns the width of the box with 66%. Also an my Samsung S9, it does not change the dimensions. I also tried the max width option with different widths. Same result. Can you see the problem? I have used that mechanism at some other position in the same sytle sheet and it works...
Try to change the order of the rule blocks, put the query after the default. I had encountered similar behavior and this had worked for me.
EDIT:
I wasn't paying attention. You cannot set width or height on inline elements. Just make it inline-block. It should be ok.
"The width of an inline element is the width of the content. The height and width of an inline element cannot be set in CSS. You cannot set the height and width of block-level elements in CSS."
https://web.stanford.edu/class/cs193x/lectures/05/block-inline
This is the codepen:
https://codepen.io/GummyGod/pen/XZqbKY
That's the query i wrote:
#media screen and (max-width:500px){
.content{
display:flex;
flex-wrap:nowrap;
}
.sidebar {
order:-1;
}
.resume {
width:100%;
order:;
}
}
Basically,at the end of the css file i made a css media query in order to make it responsive at widths from 0 to 500px ,however, when the size is in that range of pixels that weird tag shows up and i can't seem to be able to style it
Try this. Remove width and float:left for sidebar,main classes. Adjust padding for space between sidebar and main class based on your need.
.sidebar, .main {
display: table-cell;
}
Not sure how to explain this but here I go:
I have 2 buttons (variable width, depending on the text inside) which are positioned next to each other (picture on top). When I make my screen smaller (picture at bottom), the buttons expand the parents width and position below each other. Is there a way to check when this happens?
I want to set a margin (so buttons don't stick to each other) and set a fixed width, ONLY when the buttons are positioned below each other, because of design reasons.
As far as I know, each browser renders a little bit different, and I also want a solution that will keep working when I decide to change the buttons text.
How would you do this? Is there a plugin or a simple jQuery script that can check this?
This is what I have so far: JSFiddle
<div class="cta-buttons-wrapper text-center">
this is button one
and button two
</div>
.cta-buttons-wrapper{ margin: 40px auto; }
.cta-buttons-wrapper .btn{ margin: 0 15px; }
.btn{
margin: auto 25px;
// ...
}
.btn-primary{
color: #fff;
background-color: lightgreen;
border-color: lightgreen;
}
.btn-primary-reversed{
color: lightgreen;
background-color: #fff;
border-color: lightgreen;
}
If you don't want to stick buttons add following css
.cta-buttons-wrapper .btn{ margin: 10px 15px; }
And for button width you need to set specific width for that using media query
#media (max-width: 767px) {
.cta-buttons-wrapper .btn
{
display:block;
width:60%;
}
}
This can be achieved without the need of a jQuery plugin, in CSS you can declare a media query for certain screen sizes and within that media query you can add different styles for the buttons that would only apply at that screen size, for example if the buttons are not displaying as you wish on mobile screen sizes you would add the below media query that would trigger at screen sizes that are 767px or less, like so:
#media (max-width: 767px) {
.cta-buttons-wrapper .btn {
display:block;
width: 100%; /* this will make the buttons span the width of the parent div */
margin: 0 0 30px 0;
}
}
I have declared width: 100%; so that the buttons span the width of the parent div on mobile only and when you add more text it will still look neat, whereas with a fixed width it does not give you that flexibility.
Here is an updated link to your fiddle with my added solution:
Fiddle
You can simply do this with CSS.
#media (max-width: 767px) {
.btn {
margin: 25px;
}
}
I've set up a media query that should center an image when the screen is smaller than 600px. When bigger then 600px, the image correctly displays to the right of the site title. Chrome inspector assures me that the queries are working, but I think there might be an overarching rule that's keeping my margin: auto from applying. The 'globes' image in question is at the top of:
http://livinginbetween.org/temp/
I'd love any suggestions. Thanks in advance for your time.
Add display: block; to your media query to center the image.
#media only screen and (max-width: 599px) and (min-width: 0px) {
.globes {
display: block;
width: 159px;
margin: 0 auto 0 auto;
}
}
CSS style
is it possible to do the header and the footer contents can be depend on the resolution of a screen??
I plan for the home to be 100% size of the screen but I don't know if the contents can be resized if they resolution is big or small from the default ,especially divs and texts.. what would be the best css code that could make out the same effect, that will also be IE friendly.
is it possible to do the header and the footer contents can be depend on the resolution of a screen??
--Yes, use media queries in css to hide and show divs with separate content at different screen sizes
.header2 {
display: none;
}
#media (max-width: 600px) {
.header1 {
display: none;
}
.header2 {
display: block;
}
}