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;
}
Related
Okay beginner here- trying to get this site to look good no matter what screen size.
This is the site page that works no matter the screen size:
https://jsfiddle.net/garixakor/j0xck25v/1/
I tried to center one of the paragraphs so it looks better in desktop view and when I do the text no longer fits neatly in phone size or when making the desktop browser smaller.
P.blocktext {
margin-left: auto;
margin-right: auto;
width: 20em
}
<p class="blocktext">Step back in time etc etc....
This change is shown in this fiddle:
https://jsfiddle.net/garixakor/5Lo4rtkc/
I am wondering if using media queries as in: if the screen size is the screen is 992x or more the centering is applied is possible or if there are other solutions or if I need to find a way around centering in this manner.
Try adding max-width: 100%. With just your width value if the screen width gets smaller than 20em the text container will flow outside the viewport and not wrap the text.
By setting max-width to 100% it makes sure that the text container cant be wider than the parent container.
P.blocktext {
margin-left: auto;
margin-right: auto;
width: 20em;
max-width: 100%;
}
P.para {
margin-left: auto;
margin-right: auto;
width: 70em;
max-width: 100%;
}
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.
I have an issue currently. I'm using a theme in wordpress and I have repositioned the header logo using custom CSS.
The problem is on the mobile version it hides my header image and moves the logo underneath the mobile menu.
Here is what I have for the current normal viewing size:
.header-middle .col-sm-3 {
position: absolute;
width: 100%;
}
.header-middle .col-sm-9 {
width: 100%;
}
.header-middle .header-logo{
position:absolute;
text-align: justify;
width:300px; /* you can use % */
height: auto;
}
I would like that to not work when the mobile version kicks in for lower resolution sizes so then it views normal again.
xeronohosting.com (temp link) also looks fine on normal display but the header background disappears when custom CSS is applied and viewed on a mobile version. So I'd like to keep the header background and logo in same position once on mobile then the mobile menu to be below those 2 sections as it displays before I applied the custom css
I have tried a couple of solutions and non seem to work so any help would be greatly appreciated.
probably (depending on the actual HTML) this will help:
.header-middle .header-logo{
position:absolute;
text-align: justify;
width: 100%;
max-width:300px;
height: auto;
}
That keeps it at or below its parents width (100%) and limits it to not become wider than 300px.
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 :)
My last question in terms of CSS was this one:
Website background responsive
it was about a responsive background and i got this one fixed after a long research. I tryed to use some of what i learned and got it nearly working as good as i wanted but(!) i messed something up.
<style type="text/css">
.logo {
display: block;
text-align: center;
margin-top:40px;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
</style>
<img src="https://www.google.com.tw/images/srpr/logo11w.png" class="logo"/>
just to keep it simple i put both together. As you may not see in a fiddle or something like this. It is working somehow fine in lower resolutions but if i screenshot it on my 1920x1080 screen and just check the left to the logo and right to the logo difference in photoshop i can clearly see that the difference from the right border to the logo is larger than from the opposite site.
I realy appreciate some ideas!
A combination of max-width: x% and max-height: x% keeps the image in the correct proportions when resizing (Keep the percentage size the same for both).
Making the image display: table allows the flexible width image to be centered with margin: 0 auto
In this example, the image is 400px x 400px with a max-width / max-height set at 40%. This is just to make the re-size obvious for the demo. Open it full screen and re-size the window to see the shrink.
CSS / HTML / Demo
.logo {
display: table;
margin: 40px auto 0;
max-width: 40%;
max-height: 40%;
}
<img class="logo" src="http://www.placehold.it/400">