Is there a built in solution to get round the min-height: 400px; that is applied to literally canvas? - not override it but reduce margins/padding within the interface or swap out the menu buttons for smaller one? Literally canvas seems to not be able to display on most mobiles in landscape - which is a shame because it looks like its about 40-60px off.
Literally canvas uses a class called .literally on its wrapper div so to minimise the interface (all the buttons etc.) a little more when fullscreen for a mobile's landscape screen I did this:
:fullscreen .literally *
{
margin-top: 0px !important;
margin-bottom: 1px !important;
padding: 0px !important;
line-height: 100% !important;
}
Then for the literally canvas div, I reset the min-height as follows:
:fullscreen .literally
{
width: 100%;
height: auto;
min-height: 325 !important; /* reduce literally canvas's min-height */
}
This reduces the app more than enough to fit.
Related
Is it possible to disable Snipcart's full-page cart? I have set data-config-modal-style="side" like the docs says to but on smaller screens the cart still opens the full page-cart.
I don't want to have to design two different carts to look the same.
It looks like they automatically switch to full-page view in small screens. What you can do is override that behavior with the same styles they are using for side-modal. Add this to your global css:
.snipcart-modal__container {
width: 35% !important;
max-width: 540px !important;
margin-left: auto !important;
right: 0 !important;
}
.snipcart-modal__container.snipcart-layout--large {
width: 100% !important;
max-width: 100% !important;
}
You can also remove data-config-modal-style="side" from HTML now, since you don't need it anymore.
So I noticed something peculiar while working on a personal project just now.
The following code will cause an issue with the position of the div element in portrait mode if the phone is switched back and forth between orientations.
Instead of the div sitting fixed or flush to the bottom of the screen, the div will float above and not touch the bottom of the screen at all.
html {
width: 100%;
height: 100%;
border-bottom: solid blue 3px; box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
position: fixed;
bottom: 0;
box-sizing: border-box;
border: solid black 3px;
background: white;
}
<div></div>
While troubleshooting this issue, I discovered the following things:
If you change the height of html from 100% to 110%, the issue resolves itself.
110% is very likely not the exact "break" point, but I do know that the div will not touch the bottom of the screen even if the height of html is set to as much as 105%.
The dimensions of the square do not matter too much. I've tested at 10px, 50px, 100px, and 200px, and it disappears completely if set to 10px, but behaves the way I've described above for all the other values.
Notably, I am testing this on, not an iPhone 6s, but a plain iPhone 6.
I encourage other users to test this for yourselves and share your experience!
Does this bug exist on other devices? In other iOS versions?
Is there any way to fix this other than increasing the height of html to 110%?
With all my reading on zooming with css, I have reached the conclusion that it's not really a good idea considering the limited support of zooming with all Browsers. In this regard, I cannot help but notice that Microsoft's WORD does not zoom the contents of the Word documents. Maybe they're right.
But let me trudge on ...
As a learning experience, what I'd really like to see with zooming is
= exactly what happens when re-sizing the Browser window. That is, element containers + font sizes + etc, shrink when contracting the window size (zoom out) and expand when increasing the window size (zoom in).
But, still maintaining the layout UNTIL a certain limit; e.g., when the width of the round corner box reaches a certain width say 80% of the device's width
For example:
BTW, the above is all block centered.
For example, the width rounded corner box increases with a bigger window = zoom in, and the box's width decreases with a smaller window
= zoom out.
I wish ditto for zooming, but zooming withOUT changing the window width, i.e., just for the contents of the window.
WHAT DOES HAPPEN:
with zooming in, everything appears to be doing well
with zooming out, okay UNTIL a couple of CMD-plus's. At this point, the rounded corner border shifts right and beyond the view of the Browser window and the super ugly horizontal scroll bar appears.
HTML:
<section class="roundedBodyCornersWrapper zoomStyleRule centerBlock elemPadding">
<div class="roundedBodyCorners">
<img class="headerImage centerImage" src="images/Broken_Heart.gif" alt="crying" />
<section class="roundedTextCornersWrapper centerBlock elemPadding">
CSS:
body {
background-color: white; /* around oval */
margin: 2.0em;
font-size: 120%;
min-width: 300px;
}
.zoomStyleRule {
width: 75%; /* always put fall-back spec 1st */
width: auto\9; /* IE8 = exception to fall-back spec */
width: 75vw; /* even if this isn't here, still does not work */
height: auto;
}
.roundedBodyCornersWrapper {
/* center via .centerBlock in layout */
/* padding via .elemPadding in layout */
}
.roundedTextCornersWrapper {
padding-bottom: 2.0em; /* + a tad extra above .mainContent */
}
.headerImage {
/*
original size = 888px X 448px (55.5em X 28em)
*/
width: 75%;
width: auto\9; /* IE8 exception */
padding-bottom: 1.5em;
}
.centerBlock, .centerImage {
display: block;
margin-left: auto;
margin-right: auto;
}
.infoHeader {
font-family: Georgia, Helvetica;
font-size: 130%; /* 130% x the % in body */
color: #fff;
}
BTW, everything does not work as already described even when I have
<meta name="viewport" ...>
and
#viewport {
}
appropriately placed.
In the interests of total disclosure, I am no longer certain of what dimensions change when the window resizes or when zooming out/in occur. I see the GUI changes ...
Oh, for Heaven's Sake ...
body {
background-color: white; /* around oval */
margin: 1.0em;
font-size: 120%;
/*
min-width: 300px; // Oh ... for Heaven's Sake!!!
*/
}
WHY does the elimination of min-width eliminate my zooming problems??
The "rh" logo on my site is responsive vertically, ie fits perfectly to a tall thin window, but does not resize to a wide short window. Could anyone help me make the logo responsive to both width and height?
here is the website... (takes a bit to load up)
http://rhwebdesign.co.uk/
Here is my CSS:
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
To be very specific and address your questions about the logo, consider setting the max-height relative to the window's height.
You have:
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
.hero-logo img {
max-width: 100%;
min-height: 100%;
padding: 20px;
}
In order to scale the logo, add in to the latter block:
max-height: 100vh;
This sets the images maximum height to 100% of the viewport height, which appears to be what you desire here. Note that there is some text beneath it, which is not displayed, since it is text wrapped in an H5. These two lines are 68px tall (40px padding plus 28px for the text). So, you can adjust the above to:
max-height: calc(100vh - 68px);
It looks like in landscape mode (480x320), there is a script not calculating the size of margin correctly.
<div class="container hero-content" style="margin-top: -97.5px;">
have a look in main.js for this function:
heroContent.css({
"margin-top" : topContentMargin+"px"
});
Which is this:
topContentMargin = (heroHeight - contentHeight) / 2,
heroHeight = windowHeight,
contentHeight = heroContent.height(),
I haven't really looked into why it is calulating it incorrectly. My guess is that heroContent is too high for landscape mode because the image becomes 441px high with the media query max-width:100%. So it tries to add a negative margin to compensate.
My advice would be to remove the jQuery calculation of the hero content sizing and apply sizes using css and media queries only.
Edit:
You need to be more specific with your css. Learn some more about css specifity. You should include your largest media queries at the top, so the smaller ones will take precedence at the bottom. Makes things easier. Also IMHO, I wouldn't use queries for anything larger than iPad. ie. 1024px. Although you should always test on newer devices if possible.
You will need to specify the height of the video for each specific device size. I can't tell now, but maybe jquery was determining the section heights, so now the css is determining the video height.
So at the bottom of your style sheet, try this.
div#bgVideo.skrollable.skrollable-between video#video_background {
min-height:940px !important;
}
#media (max-width: 480px) {
.hero-logo img {
max-width:55%; /*looks nice at 480 */
padding:20px;
}
div#bgVideo.skrollable.skrollable-between video#video_background {
min-height:320px !important;
}
}
#media (max-width: 320px) {
div#bgVideo.skrollable.skrollable-between video#video_background {
min-height:480px !important;
}
}
But Richard, to be honest, you should be troubleshooting and testing the design yourself. How will you ever learn if you don't try. Remember, firebug is your best friend :)
We have a web page generated via SharePoint 2013 that has a width of 1024. We use the following style on the main content div:
#container_master {
width:1024px !important;
margin-left: auto !important;
margin-right: auto !important;
background-color:#FFF !important;
}
This works well on resolutions greater than 1024. Whenever someone sets their resolution to 1024 (which we have a couple of folks that do that), there is some extra padding on the left and right sides which bring about the horizontal scroll bar.
Whenever I use FireBug, I see the following HTML being generated:
<div aria-relevant="all" aria-live="polite" style="margin-left: 20px; margin-right: 20px; min-width: 1024px;">
This margin of 20px on the left and right is the problem. I found that it can be removed by adding the following CSS:
html body.ms-backgroundImage form#aspnetForm div#s4-workspace.ms-core-overlay div#s4-bodyContainer div#contentRow div {
margin-left: 0px !important;
margin-right: 0px !important;
}
However, whenever I do this, the page is no longer centered on screen sizes greater than 1024. Any ideas on how to make the page "full screen" for those using 1024 resolution while making it centered for those with greater resolutions?
There's a nice trick for this in CSS.
use:
html body.ms-backgroundImage form#aspnetForm div#s4-workspace.ms-core-overlay div#s4-bodyContainer div#contentRow div {
margin-left: 0 auto !important;
margin-right: 0 auto !important;
}
This is the same as:
html{ margin: 0px; margin: auto; }
Sometimes IE won't use margin: auto; To solve this (in some way) add:
body {
text-align: center;
}
But this only happens with old IE browsers.
Use max-width:
#container_master {
max-width:1024px !important;
margin-left: auto !important;
margin-right: auto !important;
background-color:#FFF !important;
}
You need to replace the width property with max-width and reset the min-width:
http://jsfiddle.net/ht2Gc/
div {
max-width: 1024px !important; /* here */
margin-left: auto !important;
margin-right: auto !important;
background-color: #FFF !important;
min-width: 0 !important; /* and here */
}
**A lot of screens have a width of 1024px. for smaller screens the horizontal scrollbar isn't avoidable when you want to have a specific width of your webpage/web application (you might want to consider using min-width and max-width). Unless you are designing your website for a specific browser such as chrome I would advise to make your webpage about 4px smaller. Most web browsers have small borders on the sides, which means a 1024px screen loses a few pixels for your display. Please consider the things said above.
You can probably solve your particular problem with the following css line
body{margin:0;padding:0}
What happens here is that you tell the body to have no padding, which means your website has no extra margin on the sides.
this should solve your problem with the margin. If the scrollbar still appears while you dont want it, then also add these lines to your css:
#media only screen and (min-device-width: 1020px) and (max-device-width: 1030px){
body{overflow:hidden}
}
This checks whether the window size is within certain limits (in this case between 1020px and 1030px), if that is the case, the body will disregard everything that is bigger than the window, thus disabling the scrollbar.