I'm using a bootstrap template and getting paragraph overlap only on smartphone (iPhone 6, Safari). Works fine on browser even while shrinking the browser window to minimum size to test. Overlap occurs after 2 lines on phone.
There is no max height in the css. This is the css for paragraph:
.about-grid p {
padding:0 0 0.5em 0;
color: #333;
font-size: 1.1em;
line-height: 1.4em;
font-family: 'Arimo', sans-serif;
}
You can also see the full web page online.
It´s quite simple to fix:
on line 1279 of style.css you have a breakpoint declared
#media (max-width: 320px)
and on line 1391 you have this class:
.about-grid p {
height: 50px;
font-size: 1em;
}
The height is forcing your text blocks to be only 50px high, and since you don't have an "overflow: hidden;" the text overflows and ends up overlapping on everything else. it also happens if you make your browser window really small, not just on smartphones.
All you have to do is remove that height declaration. If you need it for some reason just add a new class and make it more specific.
Hope it helps :)
Related
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 am using the following CSS to centre the text on the page but it seems to be creating a large CLS (Cumulative Layout Shift), is there a more efficient way to centre the text?
#media only screen and (min-width: 1000px) {
.page {
width: 1000px;
margin: 0 auto;
font-size: 1.0em;
line-height: 1.6em;
font-family: Arial, sans-serif;
word-wrap: break-word;
}
}
#media only screen and (max-width: 999px) {
.page {
margin: 0 auto;
font-size: 1.0em;
line-height: 1.6em;
font-family: Arial, sans-serif;
word-wrap: break-word;
}
}
The CLS issue only occurs in the Desktop version and not the Mobile version which makes me think it is the width option.
It turns out the cause of Cumulative Layout Shift was caused by an image incorrectly sized with the wrong width, I said 700 when the image was actually 702. Strangely, the error was being reported in the wrong place, the error was being reported in another div rather than where the image was.
If you are looking for the cause of CLS, look at the image sizings. It wasn't caused by the style width css. The Mobile version worked because I sized that correctly.
You don't have a defined width, so the default setting auto applies to width, which is 100%. Centering a 100% wide element (with margin: 0 auto) in a parent element makes no sense: It takes the whole width of the parent. So you need to define a width for your mobile version.
I don't believe I'm grasping how to create a responsive website. this is my code:
body{
width: 100%;
font-size: 16px;
background-color: grey;
}
h1{
color:black;
}
p{
color:black;
}
#media only screen and(min-width:320px)and(max-width:420px){
h1{
color:red;
}
p{
color: white;
}
}
my goal with this small css edit was to see if I understood how the media query worked and to change the h1 and p element colors when a screen size is in-between mobile size.
however, regardless of what size the screen is, there is no changes the elements. I'm slightly confused because I've seen videos of people using this as an example.
You have the right order of things, normals rules first and then mobile rules afterwards.
Let's say you have two buttons on the screen for a desktop and a phone. Because a mobile phone obviously does not have the width to spare you may want to show the buttons above and below each other instead of side-by-side.
I have a phone with a horizontal screen width of 375px. If the buttons are rendered as 250px then they blatantly won't render side-by-side on my phone without clipping and therefore looking messy to visitors.
Take this code in to consideration:
input[type='button'] {display: inline-block; width: calc(50% - 8px);}
#media (max-width: 1024px)
{
input[type='button'] {width: calc(100% - 8px);}
}
The button input elements are set to use (roughly) 50% width (compensating a bit for border and margin). Since they are inherently display: inline; I'm using display: inline-block to keep them rendering on the same line (no line breaks for outright block rendering) though allow setting the width hence inline-block.
The media queries do not negate something like display unless it's explicitly defined, again so all the input buttons are still rendered as inline-block. But now on a mobile screen these buttons will use up enough space that they'll push each other to separate lines.
In case of iPad portrait mode or screen resolutions more than 1920px, the html body leaves a blank space on the right and every element shows white space on the right and this space gets wider with the increasing screen resolution
I have set padding and margin to 0 in the body
Moreover, I have set width 100% but the same problem persists
body {
line-height: 1.7;
color: gray;
font-weight: 400;
font-size: 1rem;
overflow-x:hidden;
width: 100% !important; }
I am expecting that there would be no white space on the right by adding the above code to body but it is leaving some space
try this
html{
width:100%;
height:100%;
}
I had designed a website : http://newyorkfairandlovely.com/ and it is responsive. But when the site is opened on a computer then the Background color of Navigation Bar is not displaying on the whole screen. The full size of the image is 1950px wide.
When the screen is reduced to 1024px or smaller then it is OK.
This is the css code:
nav {
position: absolute;
left: 0;
background-color: #9362ae;
float: left;
width: 100%;
margin: 0 auto;
max-width: 1950px;
font-family: "Source Sans Pro", Helvetica, sans-serif;
}
Check your brackets. The rule you posted is nested under this:
#media
only screen and (max-width: 1224px),
(min-device-width: 1024px) and (max-device-width: 1824px) {
/* your rule is here */
}
So once the screen size increased to greater than 1224px, your rules are no longer applied.
This is an example of why it's a good idea to properly indent your code.
This should help:
body { margin : 0; padding : 0; }
Body has its own spacing from the HTML. Different browsers have different settings, but most have some space between the edges of the <html> and the <body>,
and typically using body { margin : __; }
What is the height/width of its parent elements? I believe you could make it cover the whole screen if the parents are all 100%. Also, try setting the margin-right to 0. (I also noticed you have a float:left; in your css, that might be part of the issue.