I'm fairly new to the site but find it awesome, great expertise going around. I have a small issue with a site not displaying 100% right on mobile phones. It is build responsive and I'm of the impression it was working fine initially, but something changed along the line. The site adjusts itself to mobile screens but it does not scale properly and you must reduce it manually to see it all in the screen.
I'm not a real developer but it should be very easy fix I think. Hope someone can help.
Below my code:
#media only screen and (max-width: 767px){
.hide-for-small{ display: none; }
#mesh-left{ display: none; }
#mesh-right{ display: none; }
.push-half{ left: 0; }
.pull-half{ right: 0; }
.square-box{ min-width: 100%; padding: 33px 11px 22px 11px; }
.box-title{ background: none !important; margin-bottom: 0px; width: 100% !important; }
.box-title h4{ color: #222 !important; }
.form-title{ width: 100%; top: 0px; text-align: center; }
#form-holder select{ width: 100%; }
.form-input input{ width: 100%; }
.form-input textarea{ width: 100%; text-align: center; height: 100px; }
.show-for-small{ display: block; }
#contact{ padding: 44px 15px 44px 15px; text-align: center !important; }
#logo{ margin-top: 55px; }
.social-header{ top:2%; left: 35%;}
#main-menu{ margin-left:0;}
}
#media screen and (max-width: 370px){
.hide-for-small{ display: none; }
#mesh-left{ display: none; }
#mesh-right{ display: none; }
.push-half{ left: 0; }
.pull-half{ right: 0; }
.square-box{ min-width: 100%; padding: 33px 11px 22px 11px; }
.box-title{ background: none !important; margin-bottom: 0px; width: 100% !important; }
.box-title h4{ color: #222 !important; }
.form-title{ width: 100%; top: 0px; text-align: center; }
#form-holder select{ width: 100%; }
.form-input input{ width: 100%; }
.form-input textarea{ width: 100%; text-align: center; height: 100px; }
.show-for-small{ display: block; }
#contact{ padding: 44px 15px 44px 15px; text-align: center !important; }
#logo{ margin-top: 55px; }
.social-header{ top: 150px; left: 35%; }
#main-menu{ margin-left:0;}
}
/***** TABLETS PORTRAIT & LANDSCAPE *****/
#media all
and (min-width : 768px)
and (max-width : 1024px) {
mesh-left{ left: -280px !important; }
mesh-right{ right: -360px !important; }
}
/***** PORTRAIT TABLETS *****/
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}
Add this inside your <head> </head> tag to enable css to correctly detect the screen width:
<meta name="viewport" content="width=device-width">
You should use Bootstrap for develope responsive, mobile web applications
Related
I want to show slide images in portrait and landscape orientation.
Problem : When i rotate image image not set in full screen width
Here is my code
<ion-slides color = "light" #mySlider (ionSlideAutoplayStop)="autoPlay(mySlider)" (ionSlidesDidLoad)="slidesDidLoad(mySlider)" *ngIf="slideData && slideData.length" autoplay="50" loop="true" speed="500" class="slides" [options]="slideOpts">
<ion-slide (resized)="mySlider.update()">
<div class="bg"></div>
</ion-slide>
<ion-slide (resized)="mySlider.update()">
<div class="bg1"></div>
</ion-slide>
<ion-slide (resized)="mySlider.update()">
<div class="bg2"></div>
</ion-slide>
I have added CSS like this on each slide
ion-slides {
margin-top: 0px;
height: 100%;
width: 100%;
flex: 1;
}
ion-slide {
background-color: black;
}
.bg-style {
background: #000000;
}
.bg {
background-image: url(/assets/slide-1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
}
.bg1 {
background-image: url(/assets/slide-3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
}
page.css
ion-slides{
ion-slide {
height: 200px;
width: 100% !important;
img{
height: 200px;
width: 100%;
object-fit: cover;
}
}
}
Since Aviary does not plan on having a responsive image editor in the near future (e.g., not great on mobile safari), does anyone know of alternatives?
This is where they say that responsive is not in the near future:
http://support.aviary.com/forums/191584-developer-feedback/suggestions/3718022-fully-responsive-web-editor-for-mobile-sites
You can use the following css, to make the aviary editor popup responsive. This is the only solution:
#media all and (max-width: 640px) {
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
.avpw_is_fullscreen #avpw_controls, #avpw_holder #avpw_controls, #avpw_holder .avpw_is_fullscreen #avpw_controls {
position: absolute;
left: 5px;
right: 5px;
min-width: 300px;
-webkit-sizing: border-box;
-moz-sizing: border-box;
box-sizing: border-box;
}
#avpw_holder #avpw_tool_content_wrapper {
position: relative;
padding-bottom: 56px;
}
#avpw_holder #avpw_tool_main_container {
position: relative;
}
#avpw_holder #avpw_tool_options_container {
position: relative;
}
#avpw_holder #avpw_tool_container {
left: 0;
right: 0;
min-width: 300px;
}
#avpw_holder .avpw_prev, #avpw_holder .avpw_next {
}
#avpw_holder .avpw_tool_pager .avpw_clip {
right: 48px;
}
#avpw_holder .avpw_scroll_strip {
}
#avpw_holder .avpw_scroll_strip .avpw_scroll_page {
/* max-width:200px; */
/* width: 300px !important; */
}
#avpw_holder #avpw_rghtArrow {
right: 0;
}
#avpw_holder #avpw_canvas_embed {
-webkit-sizing: border-box;
-moz-sizing: border-box;
box-sizing: border-box;
top: 188px;
}
#avpw_holder #avpw_zoom_container {
width: auto;
min-width: 42px;
left: 5px;
/* right: 5px; */
background: rgba(51, 51, 51, 0.59);
}
#avpw_holder #avpw_canvas_element, #avpw_holder #avpw_canvas_element.avpw_position_by_transform {
-webkit-sizing: border-box;
-moz-sizing: border-box;
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100% !important;
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
}
#avpw_holder .avpw_mode_action {
position: relative;
height: 55px;
width: 100%;
top: 100%;
/* background: #303740; */
}
#avpw_holder .avpw_mode_action_left,
#avpw_holder .avpw_mode_action_left + .avpw_mode_action_right {
width: 50%;
}
#avpw_holder .avpw_mode_action_left {
float: left;
}
#avpw_holder .avpw_mode_action_right {
float: right;
}
.avpw_mode_action_left:after, .avpw_mode_action_right:before, .avpw_tool_pager .avpw_scroll_rule {
height: auto !important;
top: 0 !important;
bottom: 0 !important;
}
#avpw_holder .avpw_mode_action .avpw_button {
/* position: relative; */
}
#avpw_holder .avpw_back_button {
float: left;
}
}
I really needed Aviary Web Widget on mobile. I tried CSS tweaking. It was a nightmare.
Then, I realized I could use CSS transform, scaling the photo editor to the viewport size.
It worked!
Here is the core of it:
function adjustSize()
{
// condition to begin using scale is media query below
if (!actual.mq('(max-width: 757px)'))
{
return $('body').css('transform', 'translate(0px, 0px) scale(1)');
}
// scale = actual width in pixels divided by 757 (minimum photo editor width)
var scale = actual('width', 'px') / 757;
// left side positioning
var left = (376 * scale * scale) + (-376 * scale);
return $('body').css('transform', 'translate(' + left + 'px, 0px) scale(' + scale + ')');
}
$(window).resize(adjustSize);
adjustSize();
I am using jQuery and actual. And also this CSS:
#media all and (max-width: 941px) {
.avpw_is_fullscreen #avpw_controls, #avpw_holder #avpw_controls {
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
}
}
With the CSS above, the maximum width where the Aviary photo editor fits is 757px.
So, in the JavaScript, we only trigger the scaling when the width is lower than 757px.
I am using "body" element, because the only thing in the "page" is the photo editor.
You can change and adapt the solution to your needs.
I can't believe it worked!
Here's my CSS. Not super-pretty, but it is a start. Comments/suggestions welcome!
span.aviary-feather {
background: #ff0000 none repeat scroll 0 0;
color: #ffffff;
font-size: 16px !important;
height: auto !important;
opacity: 1 !important;
padding: 5px 40px !important;
width: auto !important;
}
span.aviary-feather::after {
content: "edit";
}
#avpw_zoom_container {
display: none !important;
}
#avpw_powered_branding {
display: none;
}
#avpw_controlpanel_crop,
#avpw_controlpanel_orientation .avpw_inset_group:nth-child(3), #avpw_controlpanel_orientation .avpw_label:nth-child(6) {
display: none !important;
}
.avpw_inner-center {
right: 0 !important;
}
.avpw_tool_cutout_centered_drawing {
padding-left: 65px;
width: 100%;
}
.avpw_colorsplash_eraser {
width: 45px !important;
}
.avpw_inset_color_widget,
#avpw_controlpanel_drawing .avpw_inset_button_label {
display: none;
}
#media all and (max-width: 941px) {
#avpw_holder {
left: 0;
position: fixed;
top: 150px;
transform: translate(0px, 0px) scale(1);
z-index: 1;
}
.avpw_is_fullscreen #avpw_controls, #avpw_holder #avpw_controls {
bottom: 5px;
min-height: 600px;
right: 5px;
top: 5px;
transform: translate(0px, 0px) scale(1);
}
.avpw_main_close {
left: 0 !important;
}
/*#avpw_tool_main_container, #avpw_tool_options_container {
width: 300px !important;
}*/
.avpw_tool_pager .avpw_clip {
left: 100px !important;
}
.avpw_mode_action_right {
float: left !important;
height: auto !important;
position: relative !important;
}
.avpw_mode_action.avpw_mode_action_right .avpw_button {
left: 0;
top: 25px;
}
.avpw_mode_action.avpw_mode_action_left {
left: -12px;
top: 12px;
}
#avpw_canvas_element, #avpw_temp_loading_image, #avpw_canvas_overlay,
#avpw_canvas_controls_layer {
/*transform-origin: 125px 0 0 !important;
transform: translate(0px, 0px) scale(0.406667) !important;*/
height: auto !important;
left: 0 !important;
top: 0 !important;
/*transform: translate(50px, 86px) scale(1) !important;*/
transform: translate(0, 86px) scale(1) !important;
width: auto !important;
}
.avpw_canvas_spinner {
left: 75px !important;
top: 115px !important;
}
}
I'm running into a very specific issue using CSS triangles:
I've created buttons that work perfectly on desktop browsers (ie9+, ff, chrome, safari), and on iPhones in portrait mode... The issue exists on iPads (retina and non-retina), as well as iPhones in landscape. The button renders with a line between the main container and the css triangle(s) that I've got in place.
Here's a screenshot on imgur:
http://imgur.com/d0k6lP2
Here's the code I'm using:
HTML:
<span>BUTTON SHAPE</span>
CSS (there are potentially a few non-relevant styles included because this is pasted from a larger file):
.cta-watch {
display: inline-block;
position: relative;
padding: 0 10px;
background-color: #91a1a8;
border-collapse: collapse;
color: white;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-style: normal;
letter-spacing: 2px;
font-weight: 400;
font-size: 30px;
letter-spacing: 2px;
text-transform: uppercase;
line-height: 40px;
text-decoration: none;
transform: rotate(360deg);
}
.cta-watch.large {
display: inline-block;
position: relative;
width: 34px;
height: 32px;
}
.cta-watch.large:hover {
text-decoration: none;
}
.cta-watch.large.arrow-left::after, .cta-watch.large.arrow-right::after {
border-left: none;
border-right: none;
}
.cta-watch.large span {
display: inline-block;
width: 0;
height: 0;
text-indent: -99999px;
}
.cta-watch.large span:before {
width: 0;
height: 0;
content: '';
border-color: transparent transparent #91a1a8 transparent;
border-width: 0 27px 14px 27px;
border-style: solid;
position: absolute;
top: -14px;
left: 0;
}
.cta-watch.large span:after {
width: 0;
height: 0;
content: '';
border-color: #91a1a8 transparent transparent transparent;
border-width: 14px 27px 0 27px;
border-style: solid;
position: absolute;
bottom: -14px;
left: 0;
}
.cta-watch.large:before {
display: block;
width: 100%;
height: 0;
content: '\25BA';
color: white;
font-family: arial, "Helvetica Neue", Helvetica, sans-serif;
margin-left: 3px;
font-size: 22px;
line-height: 34px;
text-align: center;
}
JSBin showing code demo here: http://jsbin.com/ocaGeja/1
Any help would be greatly appreciated - Thank you!
I can reproduce the same issue in Chrome for Windows, changing the zoom level.
At least in this situation, it is solved changing this value to decimal:
.cta-watch.large span:before {
...
top: -13.7px;
May be that can help you ?
Another posibility would be to change the way you create the hexagon. Instead of the triangles way, you can try the multi-background way:
.hexagon {
position: absolute;
left: 20px;
top: 20px;
font-size: 80px;
height: 2em;
width: 1.732em;
background-size: 50.5% 50.5%;
background-image: -webkit-linear-gradient(300deg,transparent 33%, red 0%), -webkit-linear-gradient(240deg,transparent 33%, red 0%), -webkit-linear-gradient(60deg,transparent 33%, red 0%), -webkit-linear-gradient(120deg,transparent 33%, red 0%);
background-repeat: no-repeat;
background-position: top left, top right, bottom left, bottom right;
}
It's responsive em based, so that it can fit your need quite well.
demo
I have the following code for my flexbox overlay
.overlay-content-wrapper {
display: -webkit-flex;
display: flex;
position:fixed;
height: 100%;
width: 100%;
top: 0;
z-index: 999;
background-color: rgba(0, 0, 0, 0.6);
padding: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.overlay-content {
padding: 8px;
min-height: 10px;
min-width: 10px;
margin: auto;
background-color: #fff;
border-radius: 8px;
border: 1px solid #a5a5a5;
position: relative;
}
<div class="overlay-content-wrapper"><div class="overlay-content">Some content</div></div>
In Chrome it works perfectly but in iOS safari (v6 simulator) it doesn't center vertically. What do I need to change to get it to work?
After digging around for a while I discovered that iOS safari supports one of the old syntaxes with teh webkit prefix (given its market share it's surprising more flexbox tutorials/tools don't include the old syntax... but hey ho).
So here is my final CSS which should work in every browser that supports some version of flexbox and falls back to just horizontal centering in other browsers.
.overlay-content-wrapper {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
position:fixed;
height: 100%;
width: 100%;
top: 0;
z-index: 999;
background-color: rgba(0, 0, 0, 0.6);
padding: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.overlay-content {
padding: 8px;
min-height: 10px;
min-width: 10px;
margin: auto;
background-color: #fff;
border-radius: 8px;
border: 1px solid #a5a5a5;
position: relative;
}
I had the same problem; aligning children (one headline and one icon) of a flex container with align-items: center. The icon aligned correctly at center but my headline aligned with top because of it's height.
Adding align-self: center to the headline CSS solved it!
Well, i have one centered div used as a footer simply by: <div id="bottom-footer">Powered by Coolname</div> and the style:
#bottom-footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 1px;
text-align: center;
}
And that renders ok in PC browser:
But when you tried on an iphone, its looks like this:
Clearly not centered, what im doing wrong?
looks like there is a margin or a padding on the containing body element or the div itself. Add this to your style sheet to reset the browsers natural behaviour:
html {
margin:0px;
padding:0px;
}
body {
margin:0px;
padding:0px;
}
#bottom-footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 1px;
text-align: center;
margin:0px;
padding:0px;
}
Remove width:100%
#bottom-footer {
height: 20px;
position: absolute;
bottom: 1px;
text-align: center;
}