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
Related
The website is freetorun.net in wordpress. When viewed on mobile devices the gold "Sign up" button is not centered on the screen.
I was thinking that changing the font-size to 14px in the CSS would fix it:
.large.custom-button span:visited {
font-size: 14px;
padding: 9px 14px 9px;
}
This code is not working though.
The target HTML is this:
<a class="large custom-button align-btn-right" href="http://freetorun.net/wordpress/choose/" title="Register Today!"><span style="background-color:#DAA520; color:#26354A">to start running faster, farther and<br> injury free SIGN UP for a clinic!</span></a>
Your layout on mobile has lots of issues with padding and floated elements. Changing the font size won't help with positioning.
Firstly the div with class social_media_top widget_text substitute_widget_class should probably be full width, and text-align: center;
You also need to remove the float: right on the gold button.
For the record, I did not solve this. And the code provided above didnt either. But the guys who wrote the U-Design theme gave me this and it is much better.
#top-elements .social_media_top {
clear: both;
float: right;
margin-left: -150px;
margin-top: -20px;
padding: 0 20px 0 0;
}
/* Mobile Screen ( smaller than 480px )*/
#media screen and (max-width: 480px) {
#top-elements .large.custom-button span,
#top-elements .large.custom-button span:visited {
font-size: 14px;
}
#top-elements .social_media_top {
padding: 0;
}
}
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 .
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 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
}
}
I am building a site, and hanged on a problem.
I positioned the menu bar perfectly, but for some reason on bigger display resolutions or android devices the Contact Us menu item tends to jump to a new line.
The link of the web page is http://uk.delux.lv Just try to zoom it and see what happens.
This is the css for menu:
#topmenu_wrap {
margin:auto;
overflow: auto;
background: #fff;
}
#topmenu {
background-color: #fff;
width:966px;
margin:auto;
padding-left: 0px;
font-family: 'Droid Sans', sans-serif; font-weight: 400;
font-size: 13px;
color: #969696;
}
What I suggest is to set the padding of the a tags in the ul>li to padding: 16px 15px. Set the total width of the topnav>ul with class menu to width: 966px.
You are not going to be able to control the width of the text on the topnav unless you make them images. That will allow the text to remain the same no matter how far the user zooms or the size they set the text in their browser.
I thought I found somewhere a while ago a way to set the text as static so when someone zoomed nothing happened but I can't find it.
As far as making it expand I wouldn't do that. You aren't going to be able to control every persons browser and the way it looks. Where I work we only check a normal view in the 5 major browsers and if they change something on their end then oh well.