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.
Related
How to lock ionic 3 website screen orientation in Portrait mode while opening in mobile browser?
Can anyone please provide any suggestion on this?
It is not possible using any plugin. But can be achieved using mediaqueries. Try adding below CSS code in your .css file:
#media screen and (min-width: 320px) and (max-width: 767px) and (orientation:
landscape) {
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
height: 100vw;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}
referring to the documentation, try to use this in your app.ts:
import { ScreenOrientation } from '#ionic-native/screen-orientation';
constructor(private screenOrientation: ScreenOrientation) {
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT_PRIMARY);
}
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;
}
}
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 have been using
#media screen and (max-width: 480px)
to determine if the device used for viewing is an iPhone, however, it seems this rule applies to both the vertical and horizontal viewport modes.
How can I determine if the viewport is indeed vertical (i.e. smaller width viewport)? I have tried
#media screen and (max-width: 320px)
but it doesn't seem to register at all.
Also, all styles located under the (max-width: 480px) restriction also gets applied to the vertical mode.
You can use the orintation media queries:
/* Portrait */
#media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
#media screen and (orientation:landscape) {
/* Landscape styles */
}
I think there is an option "orientation" with media queries ;)
http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/
I know you want to do this with CSS, but CSS really isn't the way to detect the iPhone... you should use JavaScript.
And this will help you detect the orientation in JavaScript:
function detectOrientation () {
if ( orientation == 0 ) {
document.className = 'portrait';
}
else if ( orientation == 90 ) {
document.className = 'landscape';
}
else if ( orientation == -90 ) {
document.className = 'landscape';
}
else if ( orientation == 180 ) {
document.className = 'portrait';
}
}
I would like to have my website look perfect using mobile safari on both the ipad and iphone. Currently everything looks great in landscape on some pages, but if you change the device to portrait, the whole site gets zoomed in. I am using mobile specific styles, but how can I fix this problem?
Page that doesn't work: www.zedsaid.com/apps
Page that DOES work: www.zedsaid.com/blog
CSS:
/* iPhone */
#media only screen and (max-device-width: 481px) {
#header {
width:860px!important;
}
}
/* iPad */
#media only screen and (max-device-width: 768px) {
#header {
width:860px!important;
}
}
I am just not sure why some of my pages scale correctly (blog) but other pages (apps, contact) do not!
Try this:
body * {
-webkit-text-size-adjust: none !important;
}
or:
/* iPhone */
#media only screen and (max-device-width: 481px) {
#header {
width: 860px;
-webkit-text-size-adjust: none;
}
}
/* iPad */
#media only screen and (max-device-width: 768px) {
#header {
width: 860px;
-webkit-text-size-adjust: none;
}
}