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.
Related
A web-page I've made works fine in Chrome and in Firefox when it isn't zoomed, however, the zoom breaks the layout in Firefox (but, for some reason, not in Chrome). You can see the live version.
Here is what it looks like in Firefox:
However, when zoomed in, it looks like this:
Here is the CSS code of that web-page:
body {
font-family: sans-serif;
}
#format_as_code {
font-family: "Lucida Console", monospace;
font-size: 12px;
white-space: pre;
width: calc(80 * 7.2px);
background: #111111;
color: #eeeeee;
height: calc(24 * 14.5px);
display: block;
}
h1 {
text-align: center;
}
#center {
margin-left: auto;
margin-right: auto;
width: calc(80 * 7.2px);
}
Any idea what I am doing wrong?
As long as i can tell even zooming-in in firefox doesn't break the layout (see the screenshot below). Maybe you may want to remove the width from the <span id = "format_as_code"> or set it to auto to see if anything changes at all.
Quick tip for performances thought: i've noticed that every seconds all the spans (which i think represent the pixels of your canvas) updates, even the ones that don't change at all !
This leads to a noticeable performance decrease so may want to look into it.
I'll attach a screenshot of how i see the website and how it renders on FF 79 64bit.
Hope this helped you a little!
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;
}
}
My wordpress theme and the plugins I have installed conflict with one another forcing me to do my own CSS coding. After toying around with CSS and the inspect element tool on chrome, I fixed the responsiveness (not really fixed, more like hacked I guess..) of my website thevandreasproject.com. I used this code to make it work on the iPhone 5 screen:
#media (min-width: 680px) {
.home-background .textwidget {
font-size: 50px;
font-style: normal;
font-weight: 500;
letter-spacing: 8px;
font-family: 'Roboto';
min-height: 880px;
padding-top: 20px;
}
}
#media (max-width: 679px) {
.home-background .textwidget {
padding-top: 20px;
padding-bottom: 175px;
font-style: normal;
font-weight: 500;
font-family: 'Roboto';
}
.site-content {
height: 0!important;
}
#footer-banner {
padding:50px;
}
}
I was wondering if anyone could help me figure out how to rescale my images and text correctly for ALL devices instead of having to figure out media queries for every device there is. I appreciate it!
Start with the smallest screen size imaginable then expand the viewport until it looks like crap. Put a breakpoint in. Repeat process until you reach largest screen size you want to accommodate. I think Dave Rupert said that somewhere. Anyways short answer is don't use media queries based on popular devices but instead based on your content. There is no easy answer.
http://codepen.io/maxwbailey/pen/nxaFr
I'm trying to get the text to center vertically. This is only important when there is white space (I.E. when the auto height would be less than min-height). How can I accomplish this? I've seen this question asked several times, but none of the answers I've yet found apply to my application.
Thanks! ^_^
Given the fact that you've set a min-height of 75px, you can just add padding of half that to the top and bottom of the text, like so:
.warning {
display:block;
font-family: sans-serif;
font-weight: bold;
padding: 32.5px 0;
/*vertical-align: middle;*/
}
.warning needs to be display: block; to accept padding, but those are the only changes that are necessary to accomplish your objective, I think. Check it out: http://codepen.io/maxwbailey/pen/qcvre
EDIT
If you want to keep the text centered until the container gets small enough that it fills the min-height, you need to use display: table-cell, like so:
.warning {
display:table-cell;
font-family: sans-serif;
font-weight: bold;
vertical-align: middle;
height: 75px;
}
http://codepen.io/maxwbailey/pen/dwfar
I am trying to create tabs that resize a bit similar to how Chrome tabs does. But I am not sure how and if it is even possible to do without JavaScript.
I don't care about browser support, I only want to see if it can be done with pure html and css/css3.
Here is the spec:
The tabs are never wider than the text inside them
When the right most tab reaches the right side of the window on resize, the tabs should start shrinking (ideal is that this happens to the widest tab first)
the active tab should never shrink
As the tabs shrink, the text should be hidden by ellipsis
the tabs will stop at a min-width that I set (so they can't go to zero width).
Can this be made with something like display: box; and box-flex: 1; properties perhaps? I haven't managed to make it yet. I have already made it with JavaScript. But the performance is not as good as I want it to (this is a BIG wep app).
So, any CSS-Gods out there up for it? If there is a way to do it with very limited use of JavaScript, I am also interested.
Thanks all!
You can get pretty close to Chrome's actual behavior with the flexbox...
body {
font: 12px/130% 'Lucida Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}
ul {
background-color: #eee;
display: -webkit-box;
padding: 10px 10px 0 10px;
}
ul li {
-webkit-box-flex: 1;
background: #ddd;
padding: 10px 15px 6px 15px;
white-space: nowrap;
overflow: hidden;
max-width: 150px;
min-width: 50px;
border: solid #ccc 1px;
border-bottom: none;
border-radius: 5px 5px 0 0;
text-overflow: ellipsis;
}
http://jsfiddle.net/a656n/
​However, your specs are impossible in CSS only. I'd also suggest that keeping the active tab 'unshrunk' breaks conventions because your tabs will change position every time you click on them.
I improved on Duopixels anwer by using one extra <span> element and display: table-cell instead of the flexbox implementation. This way you achieve better cross-browser support/fallback. http://jsfiddle.net/w34nm/ (Tested in IE8+, Firefox 10, Chrome 17)
PS: you should probably use JavaScript to set the right width values on the list items
Well, first of all, your desired functionality is not how tabs in Chrome work, they simply remain a fixed size until there is not enough room, and then they shrink uniformly to fit. (According to MDN, You could accomplish this:
To make XUL elements in a containing box the same size, set the
containing box's equalsize attribute to the value always. This
attribute does not have a corresponding CSS property.
)
Also, a visual representation of what you are looking for would be very helpful, I found some of the demands rather confusing.
Nonetheless, I've scrapped together this. Let me know if it is at all close.
ul{
display: -webkit-box;
width:500px;
background:lightgray; text-align:left;}
li{background: gray; text-align:center; height:24px; -webkit-box-flex: 1; min-width:30px; max-width:100px; overflow:hidden; text-overflow: ellipsis; }