I have set up a global element to align images to the right:
.containerright {
float: right; margin: 5px 5px 5px 10px; position:relative;
}
It works perfectly until the screen is minimized to mobile portrait size. Then the text wrap leaves a few words behind.
For example:
<div class="containerright"><img src="/images/imageexample.jpg" width="223" height="160" hspace="0" vspace="5" alt="imageexample" border="0"></div>
<h2>Here is an example of heading text!</h2>
When minimised 'Here is an example...' is aligned to the top-left of the image and the rest of the sentence '...of heading text!' falls under the image so there is a huge break where the image is sitting to its right.
How can I set the class so that when it's viewed '#media (max-width: 320px)' it stacks eg. display:block; ???
Thanks for the help!
Just remove the float in the media query CSS. :)
#media (max-width: 320px) {
.containerright {
float: right; /* remove the float on the mobile media query */
margin: 5px 5px 5px 10px;
position:relative;
}
}
jsFiddle example here.. resize the screen to see what it would look like on a mobile < 320px.
Alternatively, you could just override it in the media query..
#media (max-width: 320px) {
.containerright {
float:none;
}
}
#media (max-width: 320px) {
.containerright {
width: 100%;
}
}
Related
I created a spacing-element that uses two classes:
.spacer-mobile-M = spacing height on mobile devices
.spacer-desktop-0 = spacing height on desktop devices (only active #media (min-width: 992px))
.spacer-blank {
display: block;
border: 1px solid #000;
}
.spacer-mobile-M {
height: 20px;
}
#media (min-width: 992px) {
.spacer-desktop-0 {
height: 0px;
}
}
<div class="spacer-blank spacer-mobile-M spacer-desktop-0" aria-hidden="true"></div>
The expected behavior on a 1200px wide screen would be, that the mobile-spacer is being overwritten by the desktop style (higher specificity due to media query and defined later in the code).
However, right now, the desktop spacer is being overwritten by the mobile style.
I only experience this behavior with a spacer that has a lower height than the mobile value.
Is there a rule, that classes with height: 0 or lower height than the general one (without media query) can be overwritten? I can't find anything in Google when I search for specificity.
Thanks for a short hint.
I think the problem could be use two different CSS classes for the same element. If you use media queries, why don't use the same class? For example:
.spacer {
display: block;
height: 20px;
}
#media (min-width: 992px) {
.spacer {
height: 0;
}
}
<div class="spacer" aria-hidden="true"></div>
I don't know the rest of the code, but if on desktop size you want simply hide the spacer also you can use:
#media (min-width: 992px) {
.spacer {
display: none;
}
}
Alright, so, I'm hoping this is an easy question, but I can't for the life of me get it working.
The situation:
I've made some changes in the Additional CSS portion of the customize feature on my Wordpress theme.
I've taught myself a few things, and I was able to edit the margins and whatnot of the footer widgets.
They look great on desktop, not so much on mobile.
From research, I've found that you can call out #media criteria, theoretically making two sets of margin settings: one for a max screen size you set for mobile, and one for desktop.
Here's what I've been able to come up with:
#text-5 .widget-title{
margin:0px 0px 10px 0px}
#text-6 .widget-title{
margin:0px 0px 10px 0px}
#text-7 .widget-title{
margin:0px 0px 10px 0px}
#custom_html-2 .widget-title{
margin:0px 0px 10px 0px}
#text-7 .footer-row-2-widget.widget.widget_text{
width: 100px;}
#text-7 {
width: 200px;
margin:-10px 0px 5px -10px}
#text-5 {
width: 200px;
margin:-10px 0px 5px 0px}
#text-6 {
width: 300px;
margin:-10px 0px 5px -50px}
#custom_html-2 {
width: 350px;
margin:-10px 0px 5px -50px}
This seems to be working so far. (I know negative pixels is not ideal, but I can't figure out how to otherwise move the columns to where I want them.)
So, how do I call out #media in the Additional CSS? Nothing I'm finding is helping to show what needs to be done for the Additional CSS box itself, but rather for the editor files, which I don't want to touch (aka break).
Thank you!
The site in question: http://q6q.118.myftpupload.com/
You need to add the media queries to you css file. Basically they are organized for breakpoints in pixels depending of the screen size, which will apply the rules it has inside.
Here are some of the most common breakpoints (you can make your own to support as many options as your want). I hope that helps.
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
I want to change the order of two divs. The HTML:
<div>container
<div> Navigation backwards </div>
<div> Social buttons </div>
<div> Navigation forwards </div>
</div>
Looks like this on a big screen:
<-- [social] -->
I need to change that for small (mobile) devices to:
<-- -->
[social]
Is this possible with pure css? I could just add some HTML and solve it with display: none, but that's an ugly solution imo.
So #acudars is right... but there's some things to consider here. One thing is that the order of your markup will make it tricky to achieve this... so by adding the social buttons at the bottom you can assure this will be easier to achieve.
I went ahead and made a jsFiddle: Demo
HTML
<div class="navCont">
<div class="arrowPrev">←</div>
<div class="arrowNext">→</div>
<div class="socialButtons">Social Buttons</div>
</div>
CSS
.navCont {
background: #f6f6f6;
border-radius: 5px;
clear: both;
overflow: hidden;
padding: 5px 10px;
}
.arrowPrev {
float: left;
}
.socialButtons {
text-align: center;
}
.arrowNext {
float: right;
}
#media (max-width: 320px) {
.socialButtons {
float: none;
clear: both;
}
}
So lets say that you are targeting mobile devices at 320px width... just go ahead and resize the fiddle to see this in action.
The CSS is very straight forward and I just added a little style to make it clear.
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
Can someone take a look at my website and help me fix how a section looks while viewed on a mobile device. The "Thousands of Canadians" and "Mobile Search" sections on the homepage are not responsive like the rest of the page. Any help would be greatly appreciated.
Below is the CSS i have inserted so far:
#media all and (max-width: 640px){
#site > .wrapper, #footer > .wrapper {
margin: 0;
padding: 40px;
width: auto;
}
}
www.jobspark.ca
I don't think you are targeting the right part, if you look at the columns those are in, there are .myLeftColumn and .myRightColumn divs that have the original percentage widths. Try changing both of those to 100% width when the screen is smaller than 640px or whenever you need a breakpoint.
#media all and (max-width: 640px) {
.sqs-block-content .myLeftColumn,
.sqs-block-content .myRightColumn {
width: 100%;
}
}
I have a couple of images in a facebook app. The problem is that the image is quite big and I need it to look well whether it is accessed from a computer or phone. Setting it to some fixed dimension would obviously make it look bad, considering the different screen dimensions.
So, how should I resize it so that it would look well on any screen?
Set the width and height on the img tags to be percentages (of their container):
<img src="http://..." alt="" width="50%" height="30%" />
Adjust percentages to your needs.
Use media queries.
e.g:
#media all and (min-width: 1001px) {
img {
width: 100%; /* insert prefered value */
height: auto;
}
}
#media all and (max-width: 1000px) and (min-width: 700px) {
img {
width: 100%; /* insert preferred value */
height: auto;
}
}
#media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
img {
width: 100%; /* insert preferred value */
height: auto;
}
}
Try this
img
{
width:100%;/*adjust this value to your needs*/
max-width: the size of the image;/* so it wont get bigger and pixelated*/
height:auto;
}
another option if possible, is to use media queries, so for different browser sizes, you can load different size of the image.
here is a fiddle to see if this is what you are trying to achieve