I make this form but when i check in my mobile i.e oppo it's look like this: Image
When I check this in iPhone it looks messy: Image
You can try following CSS to fix this issue:
line-height: 1;
Related
The ChromeVox extension for Google Chrome browser places an orange outline around content when selected on the screen.
This orange outline is also printed when printing a web page. See how button below is selected with orange outline and then also appears on print preview.
How do I disable this orange focus ring when printing?
Solved it with print css media-queries!
The ChromeVox injects markup and styles into the body of the page that looks like this:
<div aria-hidden="true" class="cvox_indicator_container ...more classes...">
...more html markup...
</div>
So I updated my global CSS stylesheet to include the following:
#media print {
.cvox_indicator_container {
display: none;
}
}
Which worked great.
Then I got to thinking that I wanted to make sure this never changed even if ChromeVox changed their css to have greater specificity.
Then, I updated the css to:
#media print {
html body div.cvox_indicator_container {
display: none !important;
}
}
Note: This may be overkill, but certainly has more specificity.
Ideally the ChomeVox team would add something like this solution to their code. I tried to find their open-source repo… got close but failed. Halp?
I want to change the beam looking I thing that appears when you hover over text. However, I've only been able to change the pointer cursor. Is this possible in CSS?
Edit: I wanna change the way the text version of the cursor looks like. Instead of being the I beam, I want it to be a custom image. Is this possible?
you need to use css to style the cursor with " cursor: someStyleName "
ex that makes it a crosshair:
span.myclass {
cursor: crosshair;
}
this link shows a use (in html, but the code is the same in css) and a demo of what it looks like, as well as many of the different style types:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor
ps: this site in general is great for web dev info.. even java/jquery stuff.
Trying to print my views to PDF and I am getting pdfs rendered as for mobile device. Basically, I think smallest screen is detected and css styles for mobile are used. Is there a way to fix this?
I tried to change format size and make it really big, tried to use landscape orientation, but content would just scale up and it would still show with mobile styles.
I am thinking to render a partial view to pdf and have custom css file just for pdf exports, but that seems like a lot of not necessary work
Any ideas?
Thanks
What you could be doing is using the print media type in your stylesheet. It would look something like this:
#media print {
p {
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
color: red;
}
}
Maybe you already use this media type and put it in your mobile styling? Might want to put it above any responsive input and see how that works out?
This is my website http://kaybs.in/Medical/index.html, my problem is how to set a default resolution for this webpage to look same in all monitors,how to fix the css ?
maybe it help you
body {
max-width: 1000px;
}
Seeing your website try reading media queries and set your image(carousel) for a max-width so it doesn't get stretched.
Try reading this:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
http://mediaqueri.es/
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
I have a webpage that I'm trying to view in a UIWebView.
It looks like this at the top (space at top before content starts):
In desktop safari, it looks like this (no space at top):
I have the following css for the body tag:
body{
margin:0;
padding:0;
}
Is there something else that I need to do to remove that spacing? Is there a firebug for mobile safari?
thx
edit 1
I also have the following meta tag:
<meta name="viewport" content="width=320;height=420;user-scalable=yes;initial-scale=1.0;">
it will work try it, if this work please mark it as correct answer
*{margin:0;padding:0}
Probably a little bit of a special case but there was an origin.y value on the UIScreen which I just needed to set to 0 which fixed the issue above.
Here's the relavant code:
CGRect webFrame = [[UIScreen mainScreen] applicationFrame];
//webFrame.origin.y += kTopMargin + 39.0; // leave from the URL input field and its label
webFrame.origin.y=0;