I got this issue with the text overlaying itself on very small screensizes, such as mobile devices or very small windows in chrome.
Text Logo with the bug
My css for the navbar looks like this:
.navbar-default {
background-color: #B71C1C;
background-image: none;
justify-content: center;
height: auto;
line-height: 18px;
letter-spacing: 2px;
font-weight: bold;
padding-top: 20px;
padding-bottom: 20px;
border-color: #FFF;
position: relative;
}
.navbar-brand {
font-size: 3em;
margin-left: 25%;
display: block;
border-color: #FFF;
z-index: 1;
}
I'm not sure whats causing it since it never happens on my screen ("24 and iphone 6s +) since my screens are larger than some others. I got the issue as feedback from someone else who tried to check my site. It would be great if the second word just appeared below the first one in such cases.
Regards,
stAMy
Try this it may work fine.
#media(max-width: 767px){
.navbar-brand {
font-size: 2em;
margin-left: 0;
}
}
Explanation
You have used margin-left: 25%;, it occupies 25% of empty space, then the font size as 3em. There may not have any space so the text breaks and comes in second line.
Try to use the font size and margin in media query, which I have given.
Related
I'm working on a free-code-camp project and when I try to shrink this site the text
overflows from the container which width is set to "auto". The text is overflowing from the bottom and I have no idea why.
I have tried height: auto, height: 100%, etc., but nothing works.
Markup:
<section id="product-info">
<img class="background-image" src="https://i.postimg.cc/50G4sHcs/water-
2208931.jpg" alt="">
<div class="product-info-wrapper">
<h1 class="product-info-title">Why our bottles?</h1>
<p class="product-description">We offer bottled water cared for from
end to end with the idea of nothing ever becoming "waste". Our Better
Bottle and label are made from plants, non toxic and compostable. We
also offer collection for the bottles we sell, taking responsibility
for our product post-sale and making sure that every bottle returned,
ends up in the correct facility, not the environment. We have been
developing our plant-based cap as currently, only plastic options are
available. The way we see it, if we
are using plastic, it should be made from naturally renewable
materials and hold the ability to disappear after its useful life </p>
</div>
</section>
CSS:
#product-info {
width: 100%;
position: relative;
}
.background-image {
width: 100%;
height: 100%;
object-fit: cover;
max-height: 600px;
filter: blur(1px) grayscale(70%);
}
.product-info-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
align-items: center;
/* background: white; */
height: 100%;
color: white;
}
.product-info-title,
.product-description {
font-family: "Open Sans", sans-serif;
}
.product-info-title {
font-family: "Kalam", cursive;
/* text-decoration: underline #271F30; */
text-transform: uppercase;
letter-spacing: 5px;
font-size: 35px;
}
.product-description {
width: 80%;
line-height: 1.8;
/* height: 150px; */
/* padding: 10px 20px 25px ; */
}
I want the text to be responsive when I resize the window and I don't want to hide it, I just want it to shrink responsively.
Could you please advise me?
Add word-wrap: break-word to your CSS
For text responsiveness you can use vw units https://www.w3schools.com/cssref/css_units.asp
Just dynamically adjust the font size to the available screen width.
Do your custom calculation as the default:
.product-description {
font-size: calc(10px + (100vw / 200));
}
Then, set a maximum width with a media query
#media screen and (min-width: 800px) {
.product-description {
font-size:16px;
}
}
The example above has a minimum font-size of 10px, increased by 1 for each available 200px screen width. For instance: screen width: 600px => font-size 13px
Still, you need to handle long text with care. You may reach a point, where a "read more" button/link is unavoidable.
PS: object-fit is not supported on IE. If you rely on that browser, rework your css to use:
background-image: url"(myImage.jpg"); background-size: cover;
*{
word-break: all;
}
you can use any selector you want :)
I hope it helps.
I am trying to align 3 images horizontally & responsively so the images become vertical when a user visits the website on a mobile device.
I am having a few problems since the alignment does not work properly & for some reason my "border-radius" property is not applying.
Here is my JSFiddle: http://jsfiddle.net/hxL7d0e1/
CSS:
#portfolio{
background-color: : white;
padding-bottom: 50px;
}
#portfolio h1{
font-size: 30px;
font-weight: 400px;
letter-spacing: 5px;
text-align: center;
color: #000;
}
#portfolio h2{
font-size: 15px;
letter-spacing: 2px;
text-align: center;
color: #000;
}
.project img{
padding: 50px;
width: 25%;
float: left;
border-radius: 12px;
}
Ok here it is. The stacking is a simple issue to solve. In this case I've used inline-block display to have the containers in a row, and a media query to change their width to 100% on screen sizes less than 700px.
.project {
display:inline-block;
width: 33.33%;
margin-right:-4px;
}
#media only screen and (max-width:700px) {
.project {
width:100%;
}
}
For the border-radius problem, you were using example images with whitespace inside them, which was throwing off the visuals. Check this updated fiddle with everything working properly:
http://jsfiddle.net/hxL7d0e1/2/
Using the firefox debugger i was able to see that your image has alot of white space around it. The blue rectangle is inside another bigger white rectangle. Could you use an image without that white space. See link to your image below;
https://upload.wikimedia.org/wikipedia/commons/c/cc/Rectangle_.png
You could change the background of your whole page to something like red and you'll see what am talking about.
As shown in the images, the background image of my webpage fits on chrome, but for some reason, the image does not scale correctly in firefox even though the window sizes are the same. Worse yet, when I shrink the window width, it does not scale well at all. How am I supposed to know the window size of the browser someone is using?
UPDATE here are the images. First is chrome, second is firefox
https://www.flickr.com/photos/125343138#N07/24491082235/in/dateposted-public/
https://www.flickr.com/photos/125343138#N07/24464890356/in/dateposted-public/
Here is the stylesheet
.nav {
list-style-type: none;
margin: 0;
padding: 0;
width: fill;
overflow: hidden;
background-color: #333;
}
.nav li {
display: inline;
padding: 20px 10px;
}
.nav li a {
color: whitesmoke;
padding: 14px 190px;
font-family: 'futura';
font-size: 16px;
position: relative;
top: 5px;
}
.jmb {
background-image: url('https://farm2.staticflickr.com /1600/24149223706_da584c8c45_o.jpg');
height: 100%;
width: 100%;
position:absolute;
background-repeat: no-repeat;
background-size:contain;
background-position: 00px 37px;
}
.jmb h5 {
font-family: 'Yellowtailregular';
font-size: 105px;
color: black;
margin-top: 170px;
margin-left: 190px;
-webkit-animation-delay: 1s;
-webkit-animation-duration: 4s;
}
.jmb div p
{
font-size: 27px;
font-family: 'futura';
margin-left: 110px;
margin-top: -24px;
word-wrap: break-word;
width: 27%;
-webkit-animation-delay: 2s;
-webkit-animation-duration: 4s;
}
Technically you'll only really know what browser size your user is using based on your metrics and what you know about your demographic. I'd start with something small and scale up higher as you go till you reach that large desktop size.
AMACB is right about the webkit support so some of your code might require a moz prefix to work correctly. you can find documentation on the support for that here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_support_chart
As far as covering your entire given area, I don't see a live link but my first suggestion would be to try with this:
background-size: cover
That should take the image and map it to the size of the object its in although you may not get the aspect ratio right. Thats when you might consider using media queries and/either different images or different positioning to alter how its displayed. Be sure to check your markup as well to make sure that there isn't an object that is on the border of your page as well that would prevent the image from reaching the end.
Ok, here is the issue I am having. I am hoping to seek some guidance on this. I am sure I am doing something wrong, but what that something is I don't know. I have attached two screen shots to show what I am doing here. The second one will show the anchor tags, which are display: inline at the moment overlapping each other when the browser window is to small.
**** CORRECTLY DISPLAYED ****
**** INCORRECTLY DISPLAYED ****
#linkWrapper A {
padding: 10px;
border: 5px dashed #fff;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
width: 200px;
height: 30px;
margin: 0 auto;
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 30pt;
display: inline;
}
Since you dont post the html, my wild guess would be that the height CSS property does not suffice the whole button height.
So instead, use
CSS
#linkWrapper A {
height: 100px;
line-height: 100px;
}
It is a good habit to include the line-height property for cross browser compability.
One suggestion is try to use it on % for height and width which helps lots of time, along with issues
about your issue, when screen in decreased the div or span font-size will remain as it is, that's why you will see two line one above and below, you can use #media query in CSS which help you in customizing for different screen width and height variant
#media (min-width: 481px) and (max-width: 850px) {
#linkWrapper A {
padding: 10px;
border: 5px dashed #fff;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
width: 200px;
height: 30px;
margin: 0 auto;
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 30pt;
display: inline;
}
}
NOTE:
above css i have just copied and pasted, please change the css properties as you desired, so as above you can give for any width size screens
let me know if you have trouble
I have a website that looks fine in my resolution and even in the more common 1024 x 768. Yet, in someone else's browser in 1024 x 768, it's too wide and the website doesn't even center correctly.
Is there a way to have a proper width layout that doesn't change when the resolution is changed?
/* Body */
body {
background: #535353;
font-family: Arial;
font-size: 12px;
color: Black;
}
form {
margin:0;
padding:0;
display: inline
}
* {
margin: 0;
padding: 0;
}
/* Header */
#header {
margin-left: 100px;
margin-right: 100px;
overflow: hidden;
}
/* Logo */
#logo
{
background-color: White;
}
/* Menu */
#menu {
margin-left: 100px;
margin-right: 100px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0 0 0 0;
text-align: left;
background-color: #AB0000;
font-size: 14px;
color: White;
font-weight: bold;
}
#menu a {
font-size: 14px;
color: White;
font-weight: bold;
}
#menu a:hover {
color: Yellow;
}
/* Spacer */
#spacer {
background-color: #8C8C8C;
}
/* Sidebar */
#sidebar {
margin-left: 100px;
margin-right: 100px;
padding-left: 10px;
font-weight: bold;
text-align: left;
background: url(Images/leftborder.jpg) repeat-x left top;
background-color: #C2C2C2;
}
#sidebar p {
color: Black;
font-weight: normal;
font-size: 11px;
}
#sidebar a{
color: Black;
font-weight: normal;
font-size: 11px;
}
/* Quick Links */
#quicklinks a{
color: White;
font-size: 12px;
font-weight: bold;
text-decoration:none
}
/* Content */
#content {
margin-left: 200px;
margin-top: 10px;
padding-left: 10px;
padding-right: 10px;
background-color: #C2C2C2;
}
#content p {
font-size: 12px;
}
#content a{
color: Black;
font-weight: bold;
}
/* Gallery */
#gallerylinks{
border-color:Black;
}
/* Footer Space */
#footerspace {
background-color: #AB0000;
}
/* Footer */
#footer {
width: 891px;
height: 70px;
margin-left: 100px;
margin-right: 100px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0 0 0 0;
text-align: center;
background-color: #C2C2C2;
font-weight: bold;
color: Black;
}
#footer a {
font-weight: bold;
color: Black;
}
#footer a:hover {
color: Yellow;
}
If you don't want the width to change with resolution/browser size, then use absolute widths in your CSS as opposed to percentages (860px as opposed to 90%).
However if it looks different in someone elses browser, it could be because of their font and font size being different.
Usually you want your layout design to accommodate the users screen resolution. You can get that done by setting your container widths to percentages. Obviously this should be set for the containers and not images.
If the layout changes on different computers, it's likely to be because of
Using a different browser and/or operating system
The browser window is resized on one of the computers
Different text size that breaks the layout (Text resizing in IE does this)
Your markup and CSS-code is full of errors.
Care to post some code?
You have two options:
Adjust your layout so that it renders properly in percentage units; resize the width of your browser window to test
Set your container width using length units (such as pixels) instead of percentage units
Make sure to test in multiple browsers as there are usually subtle variations in the way they interpret the CSS rules. Also consider using a CSS reset library to make this easier.
Browser-based apps are guests on the desktop! You can't ever assume things like screen resolution. You must test your app in as many ways as you can image. Also, use tools like Google's BrowserSize http://browsersize.googlelabs.com/ or FF's WebDeveloper https://addons.mozilla.org/en-US/firefox/addon/60/ to see what your browser app looks like in difference screen sizes.
Also, if the person has a wide screen monitor running at 1024x786, that would make things appear a little weird, too.
This is about centering correctly.
Without the HTML it's a little hard to figure out exactly what's going on, but I don't really see any CSS that would center things.
The trick to centering things in CSS is that you want equal amount of space to the left and right of an item, but since you don't know how big the user's window will be, you don't know how big this space is going to be. The solutions is to use margin:0 auto;
If you guess at the left and right margin sizes for centering things, then you will usually end up with a left margin that is what you specified and a right margin that depends on the user's window size, so things won't look centered if the window size gets bigger than a certain amount.
Here's the deployment on an example page:
The CSS:
#page {
/*
width must be specified or the div will take up all the horizontal
space it can (can be ems, %, whatever)
*/
width:860px;
/*
Top and bottom margins are zero.
Left and right are automatically the same.
*/
margin:0 auto;
}
The HTML
<div id="page">
<h1>Something interesting</h1>
<p>Something enthralling</p>
</div>
I ended up restyling the webpage in 1024X768. Then everything worked out for all other resolutions.