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
}
}
Related
I am using essential grid to show 4 panels on my homepage. the panels work fine on desktop however on mobile there is extra margin at the top. I have applied following CSS;
.l-section{ margin-top: 0 !Important;
min-height: 0 !Important;
}
But nothing seem to work. The website is tyloz.com, any help is appreciated.
For your homepage, you'll wanna add this media-query.
#media (max-width:767px){
.l-subsection-h {
margin-top: 0!important;
}
}
Problem = Text overflowing container with Zooming (CMD +).
Before zooming =
After zooming =
The following solves it, but I am very reluctant to accept ViewPort units because of their lack of full support by all current Browsers, not to mention the legacy Browsers:
html {
font-size: 16px;
font-size: 2.4vw;
}
Another much more serious problem with ViewPort units is that they obviously scale with window size and I do not wish to do that.
I wish:
(1) nothing to happen to the font-size with window resizing.
(2) ... but I do wish the font-size to decrease such that the above container overflow does not happen with zooming.
(3) avoid Javascript and CSS #media Queries if possible.
Here's the appropriate code:
HTML -
<div id="roundedTextCorners" class="centerBlockContents">
<div class="headerText">
MY VERY OWN GUARDIAN ANGEL!<p>
MY LOVE SONG FOREVER!!
</div>
</div>
CSS -
#roundedTextCorners {
border: 0.3125em #994c00 solid;
border-radius: 0.625em;
padding: 1.0em 1.0em 1.0em 1.0em;
background-color: #994c00;
color: #fff;
}
.centerBlockContents {
text-align: center;
}
.headerText {
font-family: Georgia, Helvetica;
font-size: 1.60em; /* at the top level */
color: #fff;
padding: 1.0em 1.0em 1.0em 1.0em;
}
Any ideas ??
First and foremost, thanks Mr. Lister, for sticking with me on this challenge.
I finally I decided on a "solution" I was happy with. Inevitably, I decided a max-width had to go somewhere, either in the <body> or in #media. I chose #media because I concluded I despised horizontal scroll bars more than the jerkiness inherent to #media.
When we are creating a web page using bootstrap we can set margins. But web browser also gets some margins. Although code as div(class="container-fluid") or code as margin:0; and padding:0; based on the container in the CSS file, I couldn't solve the problem. Can you help me?
Some browsers have a margin on the body tag. Set that to 0 somewhere in your css.
body {
margin: 0;
}
This is Browser default margin for body:
Fix It Like this:
body {
margin:0;
}
Set the margin to zero on any element is simple just type something like
body{
margin:0
}
Although sometimes bootstrap has his own margin rules included like setting margin on h tags, you could remove them as well by using more specific rules (read about specificity here) or by using important
h4{
margin: 0 !important
}
The reason for that is browsers have default styling for elements.
To reset margin only on body element you can use:
body {
margin: 0;
}
To reset all styling (which is not so-bad thing) in all browsers you can use css library called normalize.css.
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
This library is used by big companies as GitHub, Twitter, Soundcloud, Guardian, Medium and many others.
Although you put container-fluid, sometimes it doesn't make the width 100% fit the screen because browsers make a default margin and padding.To make it fit the screen you have to do like this.
body{
padding: 0;
margin: 0;
}
If it doesn't work make them important as following.
body{
padding: 0 !important;
margin: 0 !important;
}
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 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.