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" />
Related
Basically, using bootstrap 4, i'm trying to take the bootstrap class "custom-select" and override some of the bootstrap elements for my own uses. Here's the html and scss im using. Pretty simple stuff imo.
<select className="custom-select" id='sortingSelect' onChange={(e) => setSortingOption(e.target.value)}>
<option defaultValue value ="0">Random</option>
<option value="1">A - Z</option>
<option value="2">Z - A</option>
</select>
.custom-select#sortingSelect{
width: 5% !important;
float: right !important;
margin-right:5% !important;
}
It straight up would not work when i put it in the "module.scss" for that page i was working on, so i ended up having to put it into my custom.scss that globally overrides stuff. Even when using !important tags, it still wouldn't work in my module.scss, but it does work with my custom.scss. That's problem solved, well, kind of.
Because! I want it to also be able to change with screen size, this is bootstrap after all. So i put the following into my custom.scss
#media (max-width: 768px) {
.custom-select#sortingSelect{
float: none !important;
display: block !important;
margin: 0 auto !important;
}
}
It doesn't even seem to recognize this input at all for some reason :/
Are media queries simply just not allowed in the custom.scss file? If that's the case am i just boned? Or am i just going about this all wrong? It could be some issue with specificity, but how the heck do i get more specific than what ive already got?
Please lemme know if i need to provide more context!
Also! I read that i need to include the following code in my html
<meta content="width=device-width, initial-scale=1" name="viewport" />
However, i am using React, so i included it in the html that is returned from my Layout component that renders everything else, still no luck, and that wouldn't make sense as the problem anyhow, because media queries have worked before in that very same file, just not with overriding bootstrap stuff. Overriding bootstrap stuff always seems to be way more difficult than it needs to be in my experience so far.
Edit: I tried using bootstraps built in break points, but that failed as well
Why are you using both class and ID at the same time in your CSS file.
Either use className or Id for CSS.
Like:
.custom-select{
width: 5% !important;
float: right !important;
margin-right:5% !important;
}
OR
#sortingSelect{
Height: 5% !important;
float: left !important;
margin-left: 5% !important;
}
I want to display entire content of my database table on html page.I am trying to fetch record from database first and store in ArrayList. What is the best way to do it in java using PostgreSql database ??????
You are using iframes to embed those “previews”, I assume?
In that case, you could achieve this by making the iframe element itself larger, and then use transform: scale() to scale it down again to the target size.
Check the following example – I used example.com for the iframe content, that site is not responsive, as you can see in the first 200px*200px iframe.
The second iframe is 500px*500px – and scaled down by a factor of .4, which is effectively 200px again. Since scaling an element down this way still leaves the space it would have taken originally reserved, it is placed inside a div element that cuts of that overflow.
iframe, #i2 { width: 200px; height: 200px; }
#i2 { overflow: hidden; display: inline-block; }
#i2 iframe { width: 500px; height: 500px; transform:scale(.4); transform-origin: top left; }
<iframe src="https://example.com/">
</iframe>
<div id="i2">
<iframe src="https://example.com/">
</iframe>
</div>
https://jsfiddle.net/5hk9m446/
One thing you should be aware of, is that this will not work for just any website. Via the X-Frame-Options header websites can tell the browser, that they don’t want to be displayed in (i)frames on a different domain. In that case, you can’t do it client-side with iframes; you probably have to render a preview as an image server-side or something like that.
CSS Transforms can help you to downscale iframes.
See this example
http://jsbin.com/wiperebifa/edit?html,css,output
Please also notice with iframes your mouse events are targeted to those pages.
You can use glass pane(s) over the iframes to capture these events or alternatively you can hide iframes and display their content with canvas.
Is there a script i can use to disable my entire website (in joomla) ,from being viewed on mobile devices? I haven't used any code yet. but I do use a script to disable right clicking but it's not for the mobile version. I don't want mobile viewing at all.
But of an odd one but you could do it using a CSS3 media query like so:
#media only screen (max-device-width : 768px) {
html,body { display: none; }
}
This will result in a completely blank screen for devices that are 768px and below. You would simply need to apply to above code to your template css file.
You could maybe also use Javascript like so:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
getElementById('body').style.display = 'none';
}
I haven't tested this on every mobile device out there but it will work on most
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?
I've been researching several different ways to force a facebook comment box plug-in to be fluid/responsive/liquid/whatever-we-call-it (just showing the stupidity of names), and all of them work fine. But also, all of them make the plug-in disappear when accessing from Google Chrome.
I'm using this:
.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
width: 100% !important;
}
Which has the same results (apparently) as:
#fbcomments, .fb-comments, .fb-comments iframe[style], .fb-comments span{
width: 100% !important;
}
Question: How can I fix this strange behavior? (Why does it happen?)
Thanks for your time. Wether you do help me or not, have a nice to-day! :)
this worked for me: Add to the fb-comments div data-width="100%"
<div class="fb-comments" data-href="http://example.com/comments" data-width="100%" data-numposts="5" data-colorscheme="light"></div>
and it will be responsive when you resize the browser.
you can put the fb-comments div inside another div and give that div the width you want.
This is facebook comment part-
<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-colorscheme="light"></div>
Just add this CSS bellow the div-
<style>.fb_iframe_widget span[style]{width:100% !important;}</style>
Just Insert data-width="100%" in the div
<div class="fb-comments" data-width="100%"></div>
You could use data-mobile atribute
<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-mobile="true"></div>