I have designed responsive website viz working perfectly in laptop and landscape view of Tab and mobile.
When I've checked that in portrait view body tag is not covering full screen, A white vertical band appear in right side of the screen.
Landscape view:
No error... Working Perfectly...
Portrait View:
Body is not covering full page....
Body tag CSS:
body{
font-family: 'Raleway','Arial Narrow', serif;
width: 100%;
font-weight: 400;
font-size: 15px;
color: #333;
-webkit-font-smoothing: antialiased;
overflow-y: scroll;
overflow-x: hidden;
margin:0 !important ;
padding:0 !important
}
You've used box-sizing: content-box; for the class fs-container viz causing the issue, its your <body> is covering your full website but due that property on class there is white-space.
I've used this CSS:
#media screen and (max-width: 570px) {
.fs-container {
position: relative;
width: 100%;
padding: 0 20%;
max-width: 100%;
left: 35px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fs-block {
width: 100%;
}
}
#media screen and (max-width: 380px) {
.fs-container {
padding: 0 15%;
}
}
on particular media-query, please try this, it will do the trick for you.
I check this in my Developer Tools and everything worked fine.
Maybe the problem is your code you posted:
overflow-x: hidden;
margin:0 !important ;
padding:0 !important
Please check your semicolon:
overflow-x: hidden;
margin:0 !important;
padding:0 !important;
Make sure you are using a universal selector for margin and padding.
* {
margin: 0;
padding: 0;
}
Sometimes it will create some problems.
Related
I'm working on wordpress project for a friend. Unluckily (for me), she decided that site need sticky header which goes beyond my actual CSS understanding. I've created css that helps me center logo and menu below. Now I need help with making it sticky and setting logo in between menu/navbar positions.
Screen of header
[1]: https://i.stack.imgur.com/Vg3PF.jpg
a:focus {
outline: 0;
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&family=Playfair+Display+SC&display=swap');
/* center logo*/
.site-branding{
width:100% !important;
text-align:center;
}
.site-header .site-branding img {
margin: auto;
margin-top: 50px;
margin-bottom: 30px;
max-width: 300px;
}
/* center menu */
nav#site-navigation {
width: 100%;
text-align: center;
margin-right: 0px;
margin-bottom:55px;
font-size: 24px;
font-family: Playfair Display SC;
}
#media (min-width: 768px){
.woocommerce-active .site-header .site-header-cart {
width: 21.7391304348%;
margin: 0 auto;
float:none;
}
.entry-content{
font-family: Open Sans;
}
.h2 {
font-family: Playfair Display SC;
}````
you can use sticky and position : fixed for sticky items.
.sticky {
position: fixed;
top: 0;
width: 100%
}
I'm using Photoswipe Masonry Gallery plugin (WP), but when the images are double-tapped or pinch-zoomed, they get distorted.
Any idea what is causing this? It's not a plugin issue, as it works perfectly when switched to Twenty Fifteen theme. FYI, I'm using <meta name="viewport" content="width=device-width">. Anything suspicious in the below CSS I'm using?
#media screen and (max-width: 700px) {
/* basics */
#content,
#sidebar,
.endbar_left,
.endbar_right {
float: none;
width: 100%;
}
#content {
margin-left: 0%;
padding-left: 0%;
padding-top: 20px;
}
html,
body {
width: auto !important;
overflow-x: hidden !important;
}
img {
border: none;
max-width: 100%;
height: auto;
}
#header {
padding-bottom: 0 !important;
}
/* posts */
.inside2 {
padding: 0 10px 10px 10px;
}
.post {
padding-right: 3px;
}
.pics_article {
float: none;
margin-left: 0;
}
}
Thank you in advance for your help. FYI, I'm not a web developer. Someone with okay html/css knowledge. Thanks!
Just found the solution by myself! It was !important; in my img properties (not in the above-posted #media query, but in the main part of CSS) causing this distortion. Removing !important; from the below has resolved the issue.
img {
border: none;
max-width: 100% !important;
height: auto;}
What I want to achieve is this
To get this, I made a div (.toolbar-left) with this style
.left-toolbar {
width: 300px;
background: #ddd;
padding: 15px;
float: left;
height: 100%;
}
I also made the .paint div with this style:
.paint {
margin-left: 300px;
height: 100%;
}
I'm also using these styles in case they have something to do with my problem:
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
font-family: 'Montserrat', 'sans-serif';
font-size: 14px;
height: 100%;
}
This works properly, but as soon as I add a canvas element with width and height 100%, a vertical scrollbar gets added.
I check their sizes and everything (divs, body and canvas) have the same height.
So, why am I getting the scrollbar?
EDIT: Made a JSFiddle: http://jsfiddle.net/5Rrtp/
You just need to add display block to the canvas
CSS
#paint_canvas {
height: 100%;
width: 100%;
display:block;
}
I used this fix for Bootstrap modals on mobile devices as a base for some new code:
bootstrap-responsive.css
.modal {
position: fixed;
top: 3%;
right: 3%;
left: 3%;
bottom:3%;
width: auto;
margin: 0;
}
.modal-body {
height: 60%;
}
bootstrap.css
.modal-body {
max-height: 350px;
padding: 15px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
The problem is I'm having is I get extra space at the bottom of the modal.
How can I remove this space?
I made a fiddle that demonstrates the issue.
Try changing the height of the browser in this fiddle with a width of 480. The modal-footer should stick at the bottom but its not, when I remove the bottom:3% in .modal everything looks fine like this or this but the height of .modal overlaps the height of the screen and its not responsive
You could check to see if the orientation is landscape - and minimize the size of the modal-body accordingly
FIDDLE
#media only screen
and (orientation : landscape) {
.modal-body {
height: 160px;
}
}
Oh and by the way:
In the fiddle I fixed up the rounded corners of the model as well by adding the class:
.modal-footer
{
border-radius: 0 0 4px 4px;
}
I believe your problem is your form inside the Modal.
Put this to your CSS.
.modal form{ margin: 0 !important;}
Remove padding-bottom:
.modal-body {
max-height: 350px;
padding: 15px;
padding-bottom: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
I checked the code if u try commenting the bottom attribute given to the modal, i think this is what u r looking for.
.modal {
position: fixed;
top: 3%;
right: 3%;
left: 3%;
/*bottom:3%;*/ /* if u comment this the issue gets resolved */
width: auto;
margin: 0;
}
Also make change your modal footer css so it takes the same rounded-corners as the modal
.modal-footer
{
border-radius: 0 0 3px 3px;
}
I need simulate an A4 paper in web and allow to print this page as it is show on browser (Chrome, specifically). I set the element size to 21cm x 29.7cm, but when I send to print (or print preview) it clip my page.
See this Live example!
body {
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page {
width: 21cm;
min-height: 29.7cm;
padding: 2cm;
margin: 1cm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
padding: 1cm;
border: 5px red solid;
height: 256mm;
outline: 2cm #FFEAEA solid;
}
#page {
size: A4;
margin: 0;
}
#media print {
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
<div class="book">
<div class="page">
<div class="subpage">Page 1/2</div>
</div>
<div class="page">
<div class="subpage">Page 2/2</div>
</div>
</div>
I think I'm forgetting something. But what would it be?
Chrome: clipping page, double page (it's just what I need it to work)
Firefox: it works perfectly.
IE10: believe it or not, it's perfect!
Opera: very buggy on print preview
I looked into this a bit more and the actual problem seems to be with assigning initial to page width under the print media rule. It seems like in Chrome width: initial on the .page element results in scaling of the page content if no specific length value is defined for width on any of the parent elements (width: initial in this case resolves to width: auto ... but actually any value smaller than the size defined under the #page rule causes the same issue).
So not only the content is now too long for the page (by about 2cm), but also the page padding will be slightly more than the initial 2cm and so on (it seems to render the contents under width: auto to the width of ~196mm and then scale the whole content up to the width of 210mm ~ but strangely exactly the same scaling factor is applied to contents with any width smaller than 210mm).
To fix this problem you can simply in the print media rule assign the A4 paper width and hight to html, body or directly to .page and in this case avoid the initial keyword.
DEMO
#page {
size: A4;
margin: 0;
}
#media print {
html, body {
width: 210mm;
height: 297mm;
}
/* ... the rest of the rules ... */
}
This seems to keep everything else the way it is in your original CSS and fix the problem in Chrome (tested in different versions of Chrome under Windows, OS X and Ubuntu).
CSS
body {
background: rgb(204,204,204);
}
page[size="A4"] {
background: white;
width: 21cm;
height: 29.7cm;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
#media print {
body, page[size="A4"] {
margin: 0;
box-shadow: 0;
}
}
HTML
<page size="A4"></page>
<page size="A4"></page>
<page size="A4"></page>
DEMO
https://github.com/cognitom/paper-css seems to solve all my needs.
Paper CSS for happy printing
Front-end printing solution - previewable and live-reloadable!