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.
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.
I get this vertical white line on the right side of my page.
it's only happening on mobile. found it using device tool bar: https://jood19.sg-host.com/
I designed the website "mobile-first". only used media queries for desktop.
I've tried, without success, the following code
html body{
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
can you recommend something?
It's because your image has a set width which happens to be wider than the mobile screen.
You can keep the set width if you add a max-width to the image. This will mean it will be the same size as you originally had except for when the screen is too small for that and then it will take up the full width.
.about-section img {
width: 28rem;
max-width: 100%;
}
Setting your .about-section img on the dev tools seem to remove the whitespace. Tried with 21 rem on mobile screens.
.about-section img {
width: 21rem;
}
I recently made a tribute page using html and CSS. The website looks fine on desktop but on mobile,a horizontal scroll bar appears and make the website look left aligned.I think its because the images exceed the parent container but I am unable to fix it.
Github pages: https://rahulviveknair.github.io/Coldplay-Tribute-Page/
Code hosted on github: https://github.com/RahulVivekNair/Coldplay-Tribute-Page
The code used to adjust image but does not seem to be working
#image {
max-width: 100%;
display: block;
height: auto;
margin: 0 auto;
}
I would suggest you to do the following:
remove margin and padding from the body, and set its width to 100%, in order not to rely on the default width applied by the browser:
body{padding:0; margin:0; width:100%;}
set a max-width if the disks cover:
#image-grid img {max-width: 100%;}
change the font-size of the title with media query:
#media screen and (max-width: 600px) {
h1 { font-size: 30px; }
}
The scrollbar only appears when your header "COLDPLAY" is getting too big/wide, which is due to its font-size. So you should use a media query for #title or h1 where you define a smaller font-size setting.
Try also wen do debugging to unable cache in DevTools(if you use Chrome).
Usually files are not updating and you don't see any result even if you change something.
Also check this page if you are beginner CSS Tricks
P.S. I also started with CodeCamp good luck on next assignments
Remove both #media for the h1 and replace them with:
h1 {
font-family: 'Montserrat', sans-serif;
font-size: calc(5vmin + 16px); /* (320,32)(1280,80) */
font-weight: 600;
text-align: center;
margin-bottom: -15px;
}
This calc() calculates the h1.font-size using linear equation y=mx+b (MathIsFun: linear equation) with points
point1 x1=320px y1=32px, fontsize 32px on a 320px display
point2 x2=1280px y2=80px, fontsize 80px on a 1280px display
and all h1.font-size for all display sizes inbetween/beyond (I tested this with your Codepen).
Did the same trick with the 'album' images by adding column-count and column-width
#image-grid {
column-count: 3;
column-width: calc(8.75vw + 252px); /* (320,280)(1920,420) */
...
}
Finally change CSS #image { max-width: 100% } to img { width: 100% } and all the images on the page resize responsively
See my Codepen
Note anything smaller than 320x320 can be considered a 'smartwatch'!
It's really easy, all you need to do is set the overflow-x value to hidden, if you only want to avoid a horizontal scrollbar and not a vertical one.
However, this will cut off things that go beyond the scrollbar, so you need to fix those widths as well.
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.
I'm building a fairly simple static frontend-only webpage. I have the following css rules for my wrapper div (everything else in the page is in it) and the body:
body {
background-image: url(../img/background.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
}
#content_wrapper {
margin: 15px 10%; /*Client wants 20% instead of 10. Navbar must be adjusted accordingly*/
min-width: 900px;
padding: 0;
border-radius: 10px;
}
Which works fine:
However, as you can read by my comment the client prefers a 20% margin, as to make the whole page more narrow. However this happens:
The page shifts right. This is pretty much the same visual issue I have opening this page with my tablet even using 10% margin (although I would appreciate an explanation to why that happens in tablets, it's not the focus of this question here).
How can I fix this? For all I know this shouldn't happen
When you state that
margin: 15px 20%;
you are effectively telling that you have 20% for both of left and right margin. This means that #content_wrapper has 60% of the container as a maximum. The problem is that 60% might be bigger than the available space. I believe you should add the width to the rule:
width: 60%;
well try changing it to width: 15px 20% 15px 10%; you wish to change only left side margin to 10%.
Or put 2 blank div on each side of .content-wrap with 10% width and phantom data to give width to it