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;
}
}
Related
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)
What I want to do is make the div of the opt-in box at the top on the posts and pages stretch across. I wanted to do it using the width:100% attribute in CSS, but it was only stretching across partway.
So I manually set the width to the # of pixels that would make it 100%. But the problem with that is that it is causing display issues on iPhone/iPad.
Is there a way to have the width of a div change on iPhone/iPad to fit to scale? How could I do this?
Thank you!
Liz
code---
.page-opt {
margin-left:-314px;
width:1583px;
clear: both;
margin-bottom:-20px;
padding-bottom:-20px;
position: relative;
}
/* Non-Retina */
#media screen and (-webkit-max-device-pixel-ratio: 1) {
margin:0;
}
/* Retina */
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
margin:0;
}
/* iPhone Portrait */
#media screen and (max-device-width: 480px) and (orientation:portrait) {
margin:0;
}
/* iPhone Landscape */
#media screen and (max-device-width: 480px) and (orientation:landscape) {
margin:0;
}
/* iPad Portrait */
#media screen and (min-device-width: 481px) and (orientation:portrait) {
margin:0;
}
/* iPad Landscape */
#media screen and (min-device-width: 481px) and (orientation:landscape) {
margin:0;
}
Check out the section regarding viewport:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
You can make use of "device-width".
try
#youroptinid { max-width: 1600px; width: 100%; clear: both; }
if that doesn't work please post your html and css code so we can help you. Without code we can only speculate.
I'd appreciate a bit of advice from someone skilled with CSS. For a reason I can't pinpoint, only the right side of my website shows up in iPhone / iPad browser, and the left 1/3rd of it can't even be seen.
If someone could explain what causes the issue and how it can be fixed, I'd be grateful.
Here's the part of css that sets the layout:
body {
position:absolute;
width: 960px;
top: 0px;
left: 50%;
margin-left: -480px;
}
First: Try to remove this (position: absolute; width: 960px; top: 0px; left: 50%; margin-left: -480px;) from your body.
Second: here's how to center a page width: 960px; margin: auto, put that on #page
So with the some css on body removed and the css below on #page it may work better
#page {
width: 960px;
margin: auto;
overflow: hidden; /* to compensate for some element overflowing and messing up your layout */
}
you need to modify the width of your body on every device.
You can use #media query to do it by css
/* Ipad Landscape */
#media screen and (max-width: 1100px) {
body {
width: 80%;
left: 0%;
margin-left: 10%;
}
}
/* iphone 5 landscape ipad portrait */
#media screen and (max-width: 800px)
{
}
/* iphone 4 lanscape */
#media screen and (max-width: 500px)
{
}
/* iphone 4- 5 portrait */
#media screen and (max-width: 400px)
{
}
I need to use an image as table background (as entire row background will works).
I tried this:
.cellTableOddRow {
background-image: url(image.jpg);
background-repeat: repeat-y;
width: 300px;
}
but it puts the image in each cell.
Is this possible?
Thx a lot!
It was really simple:
The image should be in 'cellTableWidget'
.cellTableWidget {
background-image: url(../img/bgtablas.jpg);
background-repeat: repeat-y;
width: 300px;
}
and the row must to 'delete' its style:
.cellTableOddRow {
background: none;
background-image: none;
}
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 */
}