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.
Related
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'm using flexbox and I set each section's height to 100vh.
Whenever, I resize the window, the text from the first section and the last section overflow to the other sections.
.banner, #showcase {
display: flex;
align-items: center;
justify-content: center;
}
.container, .banner {
width: 100%;
height: 100vh;
}
http://codepen.io/mrfishball/pen/oLgLxX
have you tried overflow:hidden; on the sections where the content is overlapping?
.banner, #showcase {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
/**border: 10px blue solid;**/
overflow: hidden; /*or scroll*/
}
And you can control the font size for different device screen sizes. For example:
#media only screen and (max-width: 500px) {
.banner {
font-size: 9px;
}
}
you can just add width : 100% to .content
I've been struggling with the same issue over the past few days, and after hours of Google, trial and error, I have come up with a good workaround for one of your issues. I'm still struggling with the positioning a little so I'm not going to touch on that, but figuring out how to implement fluid typography REALLY helped me with the overflow problem.
I'm not going to try explain it all in detail, because it the resources I'm linking below do a much more thorough job, and there might be information I am unaware of/misunderstood.
The TL;DR of it is that instead of a bunch of media queries, you want the text to fluidly scale to your viewport size. Here are the basic steps, but first, a disclaimer:
Test this out on a sandboxed version of your site if possible. It might take you a while to get to the ideal typographic scaling, and
you will negatively affect your customer experience if every few
minutes the text size changes.
Set your base font size to 100% (either in body or html, depending on how your site is set up)
html {font-size:100%;}
Set your typographical hierarchy in rem (not em) sizes (rem works off the base font size, making the math simpler). For example:
p { font-size: 1.25rem; }
h1 { font-size: 4rem; }
h2 { font-size: 3.25rem; }
h3 { font-size: 3.0rem; }
h4 { font-size: 2.75rem; }
h5 { font-size: 2.25rem; }
h6 { font-size: 1.75rem; }
Add the following two media queries to enable the responsive behaviour of the text, and to settle the size above a specific threshold:
#media only screen and (min-width: 10em) {
html {
font-size: calc(0.875em + 0.25 * (100vw - 80em) / 40); /* 1 */
font-size: -webkit-calc(87.5% + 0.25 * (100vw - 8000%) / 40); /* 2 */
font-size: -ms-calc(0.875em + 0.25 * (100vw - 80em) / 40); /* 3 */
}
}
#media only screen and (min-width: 120em) {
html { font-size: 1.125em; }
}
And Voila! You should have fluid typography! You will have to go through your site carefully and make sure there aren't things overriding your css (bootstrap screwed me for hours before I finally clicked, thanks to the Google Developer sidebar), and that you don't have rogue font-size declarations messing up your pretty layout. If your site is clean and your typography well laid out though, you should be able to carry on just using <p>, <h1> and so on tags, all of which will be fully responsive.
Here are a few resources I found extremely helpful in figuring this out:
https://zellwk.com/blog/viewport-based-typography/
https://www.smashingmagazine.com/2016/05/fluid-typography/
You set this height: 100vh; and that's what's causing the problem. Set it to 100%.
.container, .banner {
width: 100%;
height: 100%;
/**border: 10px black solid;**/
}
I see other answers include adding more viewport height to child elements, but I think that's asking for more trouble. Plus, it doesn't entirely solve the overlapping issue. I usually avoid vh or vw unless it's necessary to achieve something that cannot be done with them; for example, parallax scrolling or side navigation with enhanced entrance and leaving animation.
To achieve a clear cut, bullet proof sections without any overlapping, use height: 100%;
Update: I am not able to comment since I don't have enough points, so I am adding it here. In response to this comment "#StevenKwok, I updated the answer. You can search more about responsiveness and screen sizes", this supports my point, asking for more trouble. If you stick with vh, then you will need to add media queries at certain breakpoints, including small laptop, tablet, and mobile devices.
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 :)
any help here would be great.
I'm simply trying to place a header that stretches 100% of the screen. Inside this header is another div containing text. What i have looks fine at full screen, but when i resize down the text stacks on top of each other to accommodate the percentage.
If i set the container width to pixels instead of percentage, the header doesn't stretch the full length of the window unless i specify an exact pixel amount like 1463px - this doesn't seem right because while it may be appropriate for my laptop/screen dimensions i feel like it wouldn't work on a bigger screen with a maximized window.
I just want everything in my container to be able to be positioned according to the 100% of the browser width and height, but using percentages isn't allowing me to fix the elements so they stay put during resize. I've been working with percentages mostly and am having great difficulty keeping them fixed on resize as opposed to pixel dimensions, basically because using percentages is ensuring that my content is taking up 100% of the browser window, whereas I can't be sure with this when using pixels.
html, body {
height: 100 % ;
width: 100 % ;
padding: 0;
margin: 0;
}
.container {
width: 100 % ;
height: 100 % ;
margin: 0 auto;
}
#
topbar {
height: 25px;
background - color: #000000;
width: 100%;
}
# topbartext {
font - family: times;
color: #ffffff;
font - size: 11px;
text - align: center;
padding: 5px;
}
The text is what is moving during resize - when I make the window smaller the text just stacks on top of eachother in order to still fit the screen. I don't want it to do this - i just want it to be fixed and not resize.
HTML :
<body>
<div class="container">
<div class="header">
<div id="topbar">
<div id="topbartext">$10 SHIPPING TO THE USA FOR ALL ORDERS OVER $150*++ FREE SHIPPING AND RETURNS ON AUSTRALIAN ORDERS OVER $50* ++ *FULL CONDITIONS
</div>
</div>
</div>
</div>
</body>
Percentages is best for this.
If you want the text to remain in one line you can add the following to your html and css:
html...
<div id="topbartext" class="topbartext">
css...
.topbartext {
white-space: nowrap;
}
Note that:
In css it is better practice to use a class (.topbartext) rather than the id (#topbartext).
Using this method will mean that if you make your page narrower than the text you will have a horizontal scrollbar added (not ideal). You are probably better off allowing the text to wrap in which case you will need to remove the height: 25px;.
As suggested above you could use css media queries. That will take some googling to learn.
If I'm understanding you correctly you can also use a min-width: 820px on the body. This will ensure your body never gets below a certain width it will provide a horizontal scrollbar if it gets smaller than that.
html,body {
min-width: 820px;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
Demo Fiddle
Demo Fiddle Fullscreen
You can use media queries to alter the content styles based on parameters like screen size.
Here's a demo using your example that shrinks the text and allows the #topbar to expand when the screen is smaller than 800px wide (when the text starts to wrap).
For instance:
/* Normal styles that apply all the time*/
p {
font-size:1em;
}
/* Media query that applies if the display media is a screen
and the condition between the brackets is met */
#media screen and (max-width:600px) {
p {
font-size:0.6em;
}
}
You are trying to fit in a lot of text though, you may be better off allowing the surrounding div to expand by removing the fixed height:
#topbar { height:25px; };
If you want to fit all your content on a small screen, this is probably the way to go.
Have you tried using JavaScript? I am not sure what you want since you are setting the top bar container to have fixed height which means the text will be out of the container if you do not resize the height. Here is some script to force the width (or height) to full window size (I had trouble with percentage also):
function resizeTopBar() {
var width = window.innerWidth;
var height = window.innerHeight;
var target = document.getElementById("topbar");
target.style.width = width + "px";
}
window.onresize = function() {
resizeTopBar();
}
The script will not change the way it works (the text will stack on each other) since you never change the height. If you want the height to wrap, remove height: 25px; from topbar.
Screenshot:
You can try this:-
#topbartext {font-size: 1em;}
#media only screen and (min-width: 320px) and (max-width: 479px){
#topbartext{ font-size:25%;}
}
#media screen and (min-width: 480px) and (max-width: 767px){
#topbartext{font-size:50%;}
}
#media only screen and (min-width: 768px) and (max-width: 959px){
#topbartext{ font-size:50%;}
}
#media screen and (min-width: 960px){
#topbartext{ font-size:70%;}
}
#media screen and (min-width: 1280px){
#topbartext{ font-size:100%;}
}
img {
max-width: 100% !important; /* Set a maxium relative to the parent */
width: auto\9 !important; /* IE7-8 need help adjusting responsive images */
height: auto; /* Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
display: block;
-ms-interpolation-mode: bicubic;
}
The above CSS is taken from Twitter Bootstrap which allows for responsive images. The only problem is this has no effect in Firefox and IE.
In the following case:
<div class="row-fluid">
<div id="logo" class="span4">
<img src="<?= get_template_directory_uri() ?>/assets/images/logo.png" />
</div>
</div>
http://dev.netcoding.net/lowsglass/about-us/ - Here is a page showing the problem.
In Firefox or IE, shrink the page to below 432px and you will see that the images do not follow max-width anymore (while above 764px they do).
How can I fix this – without using image containers – to make responsive images work in Firefox and IE?
I've struggled a lot with Firefox / IE and max-width, specifically when on elements of display: inline-block. I use the CSS only solution below to add my fixes.
// Styles for Firefox
#-moz-document url-prefix() {
#logo img {
width: 100%;
}
}
// Styles for IE10
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#logo img {
width: 100%;
}
}
Firefox fails to scale images with max-width/height if width/height is not defined. So there are two ways.
1. Set width and max-width:
width: 100%;
max-width: 100%;
2. Use max-width and max-height in vw and vh:
max-width: 90vw;
What means the image will have max 90% of visible width. Have fun!
Instead of width:auto, try width:100%.
Best,
Cynthia
Actually, the problem isn't the img tag being affected, but the span* containers. When Bootstrap Responsive gets to a certain point, it turns off floating, and sets width to 100%. When that container pops back to 100%, the child within (your img tag) does exactly what you told it to do, which is expand to max-width of 100%.
Look at this from responsive.css... above the declaration in the stylesheet, you'll see this:
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
-moz-box-sizing: border-box;
display: block;
float: none;
margin-left: 0;
width: 100%;
}
That is what is causing the img to "resize" ... its container no longer shrinks past a certain point, due to the way Bootstrap's responsive styles are set up.
To block this, you could either modify the Bootstrap stylesheet (in which case you will have to redo the change anytime you want to update your Bootstrap files), or you can, in your own stylesheet, do something like the following:
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
-moz-box-sizing: border-box;
display: inline-block;
float: left;
}
That will put the floating back, however, you're still left with width as an issue, as the default Bootstrap style at that screen-width is trying to set width to 100%. You could try setting width:auto and then hopefully the widths for each specific span-step (.span1, .span2, etc.) will be allowed to take over, but you'll really have to test it out to see what is going to work best for your situation.
Bumped in similar problem after implementing large amount of site design using Bootstrap framework and only Chrome for debug... Biiig mistake © :) It appeared, that cool fluid Bootstrap styles didn't work for images in IE and Mozilla at all. All images were not resized and had original width, sometimes much wider than I've expected to see...
I had a lot of similar places with two columns of divs - span6 for left column and span6 for right one (those are styles for fluid Bootstrap grid). Sometimes in those columns images were placed between text lines, and as you see, images didn't resize well in IE\Mozilla and all of the cool design became not good at all :(
After googling and trying some advices from github I've decided to use jQuery :) I added class to column container (imageContainer for fluid span12 row), and added classes 50perc for images which I needed to resize properly (size of each image should be 50% of container's size). And here's the code:
$(function(){
var cont = $('.imageContainer');
$('.50perc').each(function(i, el){
$(el).width(cont.width() / 2);
});
p.s. Actually it will be much effective to use this function in window.resize event handler :)
Ran into the same problem and still haven't found a fix or CSS only hack, except for forcing width: 100% at small browser sizes, when the natural width of the image will usually be larger than the width of the page (here I've assumed I don't have any images narrower than 480px):
img
{
width: auto;
max-width: 100%;
height: auto;
}
#media screen and (max-width: 480px), only screen and (max-device-width: 480px) and (orientation: portrait)
{
#-moz-document url-prefix() {
/* Firefox doesn't respect max-width in certain situations */
img
{
width: 100%;
}
}
But that will still force images that have naturally smaller widths to get blown up, which is bad. So at that point, if Javascript is feasible or already in use, I would add this to hit every image:
PSEUDO CODE:
$('img').css('max-width', this.actualFullSizeWidth + 'px');
...which should override the CSS max-width rules, and guarantee the image doesn't get larger than it's actual width.
Responsive images for Firefox, IE, Chrome. Simple solution that works in Firefox
<div class="article"><img></div>
.article {background: transparent 0% 0% / 100% auto;}
.article img {max-width: 100%;}