I use this meta-tag
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
And I have a text that has no width limit.
The text is breaking up into two lines in portrait orientation, and when I rotate the device the text is scaled up: instead of keeping the same size and using the available space and placing the text in one line, like it should, it zooms the text and the text is still taking the two lines.
Why is that?
the CSS (compiled from SASS):
.text {color: #dee3d5; font-size: 16px; font-family: Helvetica; font-weight: bold; }
#media screen and (orientation:portrait) {
.text { margin-top: 10px; margin-bottom: 10px; line-height: 20px; } }
#media screen and (orientation:landscape) {
.text { margin-top: 5px; margin-bottom: 5px; line-height: 16px; } }
#thanx { border-bottom: solid 2px #dee3d5; padding: 10px; margin: 0 10px 12px 10px; }
You can disable this behavior by using -webkit-text-size-adjust: none;.
body {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
Related
The same width setting worked in iOS. However, in macOS, the width setting is ignore.
:root {
color-scheme: light dark;
}
body {
width: 400px;
padding: 10px;
font-family: system-ui;
text-align: center;
}
#media (prefers-color-scheme: dark) {
/* Dark Mode styles go here. */
}
I want the whole sentence showed in one line. Any idea?
I'm using the following code to resize the images... Basically, I would be swapping out the image as the screen sizes shrinks or gets wider. I was wondering if this is the right approach and what size images would I have to use for each breakpoint in the media queries?
Here is a snippet of my CSS code for the background image. BTW... I'm using "no-gutters" in bootstrap 4 to layout the site. But when the images get smaller they just show parts of the background. I want to either create a new image (resized) or have it shrink to display the proper background.
Any ideas of what size to resize the images to or how to shrink/expand them? The default starting image is 2000x1333px.
.landpage-img {
background: url(../img/bg-neon-01-2000x1333.jpg) no-repeat center center fixed;
height: 1333px;
}
#media only screen and (max-width: 1024px) and (orientation:landscape) {
.landpage-img {
background: url(../img/bg-neon-01-2000x1333.jpg) 50% 0 no-repeat center center fixed !important;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
#media only screen and (min-width: 768px) and (max-width: 991px) {
.landpage-img {
background: url('../img/bg-neon-01-2000x1333.jpg') 50% 80% no-repeat fixed !important;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
#media only screen and (min-width: 0px) and (max-width: 767px) {
.landpage-img {
background: url('../img/bg-neon-01-2000x1333.jpg') 50% 80% no-repeat fixed !important;
background-size: auto !important;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
Here is an about me page and here is the GitHub
I've been making the website responsive and even tools like protoFluid to view it as if it was on an iPhone. However, I used my iPhone and there are numerous problems. The buttons does not seem to want to change their widths even though they are based on percentages. They are overflowing to the right and leaving a black space to the right.
.container .name .social div{
width: 80px;
display: inline-block;
}
.container .name .social img{
width: 100px;
}
.social {
position: absolute;
display: inline;
width: 425px;
left: 0;
margin-left: 10px;
}
#media only screen and (max-width: 600px) {
.social {
padding: 0;
width: 424px;
position: relative;
display: block;
margin: 0 auto
}
.name .social div {
width: 16.6666667%;
}
.social img {
width: 125%;
/*width: 100px*/
}
}
#media only screen and (max-width: 450px) {
.container .name .social div {
width: 13.6667%;
}
.container .name .social img {
width: 125%;
}
}
there are many ways to solve it, include using bootstrap framework... I always use a "resize window" chrome plugin(found in appstore here) , and the error is showed. And you can work it in your dev enviroment.
The buttons stay the same because the percentage width is decided on the size of parent controller. On line 271 of stylesheet.css .social class has width 425px (the same width it has on each screen size) so the buttons stay the same. Try changing width of .social class or simply use pixels for button dimensions for that media-query - #media only screen and (max-width: 600px)
I have already tried tweaking the fancybox stylesheet but can't seem to move the hover area of the previous and next button so that it does not interfere with the play button of a vimeo video. I don't know if the problem can be solved by modifying the javascript file but I really don't have the knowledge to do so. Here is the css code of the fancybox stylesheet:
#fancybox-left, #fancybox-right {
position: absolute;
bottom: 0px;
height: 100%;
width: 35%;
cursor: pointer;
outline: none;
background: transparent url('blank.gif');
z-index: 1102;
display: none;
}
#fancybox-left {
left: 0px;
}
#fancybox-right {
right: 0px;
}
#fancybox-left-ico, #fancybox-right-ico {
position: absolute;
top: 50%;
left: -9999px;
width: 30px;
height: 30px;
margin-top: 0px;
cursor: pointer;
z-index: 1102;
display: block;
}
#fancybox-left-ico {
background-image: url('fancybox.png');
background-position: -40px -30px;
}
#fancybox-right-ico {
background-image: url('fancybox.png');
background-position: -40px -60px;
}
#fancybox-left:hover, #fancybox-right:hover {
visibility: visible; /* IE6 */
}
#fancybox-left:hover span {
left: 20px;
}
#fancybox-right:hover span {
left: auto;
right: 20px;
}
I would appreciate if someone could help me figure out how to modify the hover areas for the previous and next buttons when using fancybox.
You could also make the containing divs shorter as I have just done, so the prev/next arrow hover areas finish just above the Vimeo controls
#fancybox-left, #fancybox-right {
height: 86%;
}
I accomplished this with:
#fancybox-left, #fancybox-right {
width: 0%;
}
I put this selector in my own stylesheet which I loaded after Fancybox's.
You don't actually need to mess with original fancybox css file.
What you can do is to crop the navigation arrows to their size so the next/prev area don't cover a whole area on both sides of the box.
AFTER you linked the fancybox css file, add this inline css declaration:
<style type="text/css">
#fancybox-left,
#fancybox-right {
width: 30px; height: 30px; top: 45%
}
#fancybox-left:hover span,
#fancybox-left-ico{
left: -10px;
}
#fancybox-right:hover span,
#fancybox-right-ico {
right: -10px;
left: auto;
}
</style>
This is for fancybox v1.3.x
Am using html, css to display an image.
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto;
vertical-align: middle
}
<IMG class="displayed" src="../images/splash.png" alt="...">
</IMG>
Its not displaying the image in the center of the screen (both vertically & horozontally).
your suggestions please.
To align an element both vertically & horizontally you could use the snippet below:
http://jsfiddle.net/catalinred/huKYW/
or
HTML:
<div>content here</div>
CSS
div
{
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
background: red;
}