I'm trying to get the vertical piping for the about section to go away when the browser viewport is reduced to 990px or less wide.
Here's a fiddle of what I have, but can't get the #mediaquery to work: http://jsfiddle.net/8wsm7pfy/
Do you mean the border-left? If so, you need to override it. Just leaving it out won't do anything. Also, "990px or less" would need a max-width media query:
#media (max-width: 990px){
.about{
color: #000;
font-weight: bold;
height: 200px;
border-left: none;
}
}
Here's the fiddle:
http://jsfiddle.net/8wsm7pfy/2/
You're also missing an end </div> tag in your first .
Related
When I resize the window width-wise it looks fine, but when adjusting the height, the text does not resize, which in turn creates overflow across the bracket.
#body div[class^="side-"] ol li p.game a {
color: #000000;
font: bold .7vw/1 tungsten, sans-serif;
height: auto;
width: auto;
padding: 0;
box-shadow: 0;
}
I've tried using vmin, but that does not help as the height of the window is almost always smaller than the width. Is it possible to use both vw and vh so that the window adjusts to both width and height resizing?
Yes, depending on the specifics of your use case. CSS allows for aspect-ratio media queries. This could allow you to have one vmin or vw/vh size for various aspect ratios. A rough example based on yours:
html {
color: #000000;
font: bold 7vw tungsten, sans-serif;
height: auto;
width: auto;
padding: 0;
box-shadow: 0;
font-size: 20vmin;
}
#media (min-aspect-ratio: 3/1) {
html {
color: #00a;
font-size: 14vmin;
}
}
This should allow you to solve for your concern about aspect ratios: "I've tried using vmin but that does not help as the height of the window is almost always smaller than the width".
Depending on your design, using vw when the screen is wide and vh when the screen is taller may be better than using the vmin shown above.
Maybe, you can see the property word-wrap: break-word ?
Else, you can see :
#media all and (orientation: landscape) { /* HERE YOUR CODE */ }
I have a website where people write a message, once you click on the message the message appears on another page where people can comment under it. The second page where the message appears works fine on my monitor with a resolution of 1920 X 1380. However when I move the website to my laptop with a screen resolution of 1366 x 768 the message box that has a margin of auto moves to the left.
The message box has a class of comment
I tried this media query but nothing happened
#media(max-width: 1400px) {
.comment {
margin-left: 400px;
}
}
My css for the comment box
.comment {
margin:auto;
border:1px solid #eaeaea;
font-size: 14px;
line-spacing: 2px;
letter-spacing: 1.5px;
border-radius: 5px;
font-style: verdana;
}
Check if your media query is before your standard declaration, it should be after to prevent overwriting.
But If you want a dynamic margin I recomend to calculate it with js getting the window's innerwidth and then apply it. You can use jQuery and its .css() method
I've encountered a problem when I'm trying to adjust my CSS after the user-device dimensions. I'm using the following code:
#media only screen and (max-width: 700px) {
#form input[type=text]
{
width: 100px;
height: 50px;
margin: 95px -60px 0 15px;
box-shadow: inset 0px 0px 3px 1px grey;
border:1px lightgrey solid;
border-radius: 4px;
text-align: center;
font-family: times;
font-size: 10px;
}
}
All settings apply properly and change the original CSS except the dimensions, which remain the same. How is this even possible? Is this a CSS bug? If some do apply the selector is correct and all, but the dimensions don't. It's not a cache problem, and I've tried on several devices.
I very much appreciate the help,
Fredrik
Can you post a link to your code?
Does the problem only occur on a mobile device? What happens when you resize the browser window to a width less than 700px?
Typically this kind of error is due to having selectors that are too specific somewhere else in your code, which makes them hard to override.
Try adding !important to the end of your declaration to see if the style can be overridden. Beware its generally bad practice to leave !important in there, so if that works for you search your code for the offending selectors and adjust it until your media query can override.
I don't understand why form width increases on Safari for iPhone. I tried to modify my CSS, and seems that "font-size" caused the problem. Any Solutions?
This is the code:
HTML:
<input type="text" id="form" class="newsletter_input" name="email">
CSS:
.newsletter_input {
border: 0px solid #fff;
background: #fff;
color: #0ce980;
font-family: 'Lato', Arial;
font-weight: 300;
font-size: 42pt;
width: 855px;
height: 100px;
margin-left: 50px;
margin-top: 10px;
text-align: center;
}
.newsletter_input:focus {
ouline: 0;
}
Mobile Safari (like Chrome for Android, Mobile Firefox and IE Mobile) increases the font size of wide blocks (at all times), such that if you double-tap to zoom in on that block (which fits the block to the screen width), the text will be legible. If you set -webkit-text-size-adjust: 100% (or none), it won't be able to do this, and so when a user double-taps to zoom in on wide blocks the text will be illegibly small; users will be able to read it if they pinch-zoom in, but then the text will be wider than the screen and they'll have to pan horizontally to read each line of text!
Ideally you would fix this by using Responsive Web Design techniques to make your design adapt to mobile screen sizes (in which case you would no longer have any very wide blocks, so mobile browsers would no longer adjust your font sizes).
Finally if you really need to prevent Mobile Safari from adjusting your font sizes you can set -webkit-text-size-adjust: 100%, but do this only as a last resort since it is likely to cause mobile users to have difficulty reading your text, as it'll either be too small or they'll have to pan from side to side after every line they read. Note that you must use 100% not none because none has nasty side-effects in desktop browsers. There are also equivalent -moz-text-size-adjust and -ms-text-size-adjust properties for Mobile Firefox and IE Mobile.
Edit: for example in your case the simplest is probably the 2nd alternative, so you could try adding the following CSS:
/* Mobile browsers only */
#media only screen and (max-device-width: 480px) {
.newsletter_input {
width: 855px;
}
.newsletter_input #form{
font-size:42pt
}
}
Though it's not ideal to hardcode 855px like this; you could improve on that by using a variety of CSS media queries, or getting the device-width from JavaScript.
I am helping with the port of a site to a new server. All of this is inherited code. An example page is this one: http://fcxcobalt.fmi.com/products/
This heading:
<h1 class="main-content-heading"><span class="wrapper">Products</span></h1>
At screen widths less than 1690px the heading aligns as desired:
But at 1690px and higher widths the element left aligns to the body of the document.
The heading's own CSS may not be the issue but it is
.main-content-heading {
margin: 0 0 1.2em;
padding: 0.5em 0;
font-weight: 300;
color: #fff;
background: #1c3f94;
text-transform: uppercase;
}
Unminified CSS can be seen here: http://pastebin.com/s5MVMZVj
Can anyone advise me as to how this alignment can be made consistent?
What you are seeing here is the result of a media query in the CSS:
#media screen and (min-width:1707px){
.wrapper,.page-head,.site-menu,.droplets,.wide-content{
margin:0 auto
}
}
#media screen and (max-width:1040px){
.wrapper,.page-head,.site-menu,.droplets,.wide-content{
margin:0 3%
}
.bx-aspect-wrapper{
margin-bottom:-10em
}
.bx-pager{
right:3%
}
.bx-slide-caption,.bx-prev,.bx-next{
font-size:130%
}
}
The switch over takes place at 1707px (you estimated 1690px, well spotted!).
This is an example of a responsive design, and my guess is that the designer wanted to keep some left/right margin for smaller screens where as margin: 0 auto would lead to the margins collapsing all together.
There is nothing wrong with your browser and the CSS is working as intended.
Of course, the sharp transition may be a bit unsightly to some.
This might be made smoother by setting margin: 0 Mpx where M is a magical number of pixels that might be close to (1707px - {page layout width in px})/2, but you would have to try it to see.
Fixing Layout Glitch for Widths Greater Than 1707px
I found that if I leave out the margin: 0 auto declaration in the following CSS snippet, the "Product" label stays where it is suppose to.
I tested this in Firefox only.
#media screen and (min-width:1707px){
.wrapper,.page-head,.site-menu,.droplets,.wide-content{
margin:0 auto
}
}