I'm testing something out and it is maybe a little bit weird but i'm confused.
Why is this not "scaling" on my iphone screen? I thought the rem property would make text smaller/bigger dependent on what screen you use? This is the code.
html
{
font-size: 100%;
}
h1
{
font-size:62px;
font-size:4.42rem;
}
...
<body>
<h1>This text is going to be smaller on an iphone screen.</h1>
</body>
..
An article from Snook.ca talks about the REM units: http://snook.ca/archives/html_and_css/font-size-with-rem
In his closing statement:
And voila, we now have consistent and predictable sizing in all browsers, and resizable text in the current versions of all major browsers.
Maybe that's what is happening in your case?
Related
As the title suggests, I'm using typewriter-effect package and that gives me a cool typewriter animation.
Yet, Lighthouse thinks it is a sort of layout shift and that counts towards the CLS score. Are there any ways to migrate that besides either ignoring the score or stop using the animation?
My site BTW.
Yes, this is the proper behavior of the Lighthouse with shifting layouts.
To solve the issue you need to consider the section size, so use the width and height in the container of the typewriter section, so the lighthouse knows the size of that element before rendering the whole typewriter section and animations.
For example:
function TypeWriterSection () {
return (
<div className={{height: '350px', width: '500px'}}>
// ...
</div>
)
}
In my react app, I have a big piece of generated code (110k lines) to show on screen (an openapi json spec). I wrapped it in a <pre> tag with:
overflow-y: scroll;
word-wrap: break-word;
white-space: pre-wrap;
font-family: monospace;
height: 100%;
This <pre> has a parent <div> which set the height to something like 800px so it can scroll.
This used to work well, but recently chrome hang completely when displaying it. It works on Brave and Firefox without any issues. Strangely, the code is shared on server, if I type the url of the server and display the code directly (no react, just basic code display), chrome behave normally. It automatically wrap the code in a <pre> just like I do, with the same css style, except for the height:100%; I wonder what the hang in my application all of a sudden.
Thanks for any help.
Used react-virtualized list with chunks of data. Not ideal, but good enough for our purpose.
I have a phone number on a website. It looks good on a laptop, but on a mobile device half of the number jumps to the next line. It doesn't look good.
So how can I create a line break that will only work on a mobile device sized screen?
I am not very experienced in coding, so please be specific :) Thanks a lot for any help!
Why not just do a line break as a class in the tag?
<br class="mobile-break">
and in CSS
#media screen and (min-width: 600px) {
.mobile-break { display: none; }
}
If you use Bootstrap 4 just use the break like this:
<br class="d-md-none">
You could look into the CSS word-break property to prevent words/strings being cut in half. If it is specifically line breaks you want to use then appending a class to the element such as <br class="br-on-mobile"> and setting it to display: none in the CSS should prevent it from doing anything normally.
You can then use a media query to display the line break at specific mobile screen sizes, for example:
.br-on-mobile {
display: none;
}
#media screen and (<Your conditions here>) {
.br-on-mobile {
display: static;
}
}
EDIT: static is invalid value for display. Using inherit should fix the issue. See this Fiddle
EDIT: The header of your page must also have <meta name="viewport" content="width=device-width, initial-scale=1"> to allow for correct scaling/application of media queries.
You could also achieve this by wrapping the number in a span element and setting this to display: block when on mobile devices, although your issue with the media queries below will also apply to this.
If you're looking into this in the future for something that works in Tailwind CSS, I found this to mirror the Bootstrap and BULMA style implementations (choose your breakpoint between sm/md/etc):
<br class="md:hidden">
Instead of space between the number, add this is non-breaking space which will prevent a new line being added.
This should work on BULMA: <br class="is-hidden-desktop" />
I have a responsive site that uses the google translate widget. The weird thing is that for some time the widget now appears twice, and this seem to be related to the responsive design because if I place the same widget code on a simple html page it only appears once. I have no idea on how to solve this. Has anyone come across this?
Update.
I have discovered that this is caused by jquery.themepunch.showbizpro.min.js, if I remove that one the widget only appears once. I have not found a way to fix this yet but there might be a way. I found this piece of code.
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{ pageLanguage: 'sv' },
'google_translate_element'
);
/*
To remove the "powered by google",
uncomment one of the following code blocks.
NB: This breaks Google's Attribution Requirements:
https://developers.google.com/translate/v2/attribution#attribution-and-logos
*/
// Native (but only works in browsers that support query selector)
if(typeof(document.querySelector) == 'function') {
document.querySelector('.goog-logo-link').setAttribute('style', 'display: none');
document.querySelector('.goog-te-gadget').setAttribute('style', 'font-size: 0');
}
//If you have jQuery - works cross-browser - uncomment this
jQuery('.goog-logo-link').css('display', 'none');
jQuery('.goog-te-gadget').css('font-size', '0');
}
</script>
This code remove the logo, so I'm thinking that if I use javascript I could check and remove duplicate occurrences of <select class="goog-te-combo"> then I would only have one left, is that possible?
This happened to me using Bootstrap. I had two instances of the Google Translate code - one instance for larger screen sizes and another that was only visible for smaller screens. Both showed up regardless of screen size. Bootstrap classes like visible-xs and hidden-xs do not seem to affect the display of the Google Translate button.
You can set a global counter and make sure it's only called once.
<div id="google_translate_element"></div>
<script type="text/javascript">
var duplicate_google_translate_counter = 0;//this stops google adding button multiple times
function googleTranslateElementInit() {
if (duplicate_google_translate_counter == 0) {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
duplicate_google_translate_counter++;
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Had the same problem on RoR. Problem caused by cashing pages with turbolinks. I solved it with deprecating cashing all links in (when script loading it adds attr "data-turbolinks="false" to the body-tag)
Hello to all! I had the same issue and I KNOW is not the best practice but I fixed it with CSS just adding overflow: hidden and a right border on it.
It visually fix the problem until we get a solution and really saved time diving into JS files. Hope it works for you too. Cheers!
I want to make a responsive layout with twitter's bootstrap v2, with a column and a map.
The idea is to build a UI like that from maps.google.com, but using a responsive design with bootstrap2.
I want to have a style for desktop with
navbar on top
1 left column (as sidebar)
height: 100% minus navbarHeight, with a scrollbar
width: .span3
content that fills the rest of the screen
Then for the responsive mobile design I want the parts that have the full height to have a height depending on the content.
I made a sketch to explain better
EDIT: Looking to do something like this but responsive, and only with north (navbar), west (sidebar), and center (content)
EDIT2: I finally made it with jquery, but I want a CSS solution. If someone asks, I will put the solution as an answer.
EDIT3: Ok, here is the solution I found using JQuery (I think it's easy to do with plain js)
$(window).bind('resize', function() {
if ( $(window).width() > 980 ) {
$("#content").height(($(window).height()-40)+"px")
$("#sidebar").height(($(window).height()-58)+"px")
$("body").css("padding-top","40px")
}
else {
$("#content").height(($(window).height()-50)+"px")
$("#sidebar").height(($(window).height()-68)+"px")
$("body").css("padding-top","0px")
}
$("#sidebar").css("overflow", "auto")
$("body").css("padding-bottom","0px")
$(".navbar").css("margin-bottom","0px")
});
The $(selector).css() functions and the conditional if could be replaced with plain css and the media queries from CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive
But the problem is that $(window).height() is calculated runtime. That should be replaced maybe by something like a height:100% in CSS, and that could do the trick, but I couldn't find the right place to put that 100% height.
EDIT4: Here I found what it could be a CSS-only solution! If I make progress, I'll post the answer!
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
From my investigations this week (I'm trying to accomplish the same thing), it seems like bootstrap and a 100%-height design are incompatible from a pure CSS perspective (unless you want to make changes to bootstrap). I'd be interested in seeing your jquery solution.
I'm not sure that I totally understand what you are looking for, but take a look at http://reactivewebdesign.net/Chicago/Traffic which has a top menu (adding the bootstrap navbar should be easy).
The left column spans 3 columns and the map occupies 9 columns. There is also a link in the left menu named "Where Am I" that also uses a Google map. The css for the map is at the top of the page. If you are looking to squeeze the map into three columns, merely reverse the 3 & 9 to 9 & 3 - it should still work.
Hope this helps.
here is the solution I found using JQuery (I think it's easy to do with plain js)
$(window).bind('resize', function() {
if ( $(window).width() > 980 ) {
$("#content").height(($(window).height()-40)+"px")
$("#sidebar").height(($(window).height()-58)+"px")
$("body").css("padding-top","40px")
}
else {
$("#content").height(($(window).height()-50)+"px")
$("#sidebar").height(($(window).height()-68)+"px")
$("body").css("padding-top","0px")
}
$("#sidebar").css("overflow", "auto")
$("body").css("padding-bottom","0px")
$(".navbar").css("margin-bottom","0px")
});
The $(selector).css() functions and the conditional if could be replaced with plain css and the media queries from CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive
But the problem is that $(window).height() is calculated runtime. That should be replaced maybe by something like a height:100% in CSS, and that could do the trick, but I couldn't find the right place to put that 100% height.