I have a sidebar div that takes up 12% of the total screen width (set as a css property). I also have an <h1> block within this div, with a title. When I switch monitors to a smaller one, the sidebar ends up being skinnier, resulting in the title to extend OUT of the sidebar.
How can I format so that the text will always stay within the line? ("MY TI..." is fine for a result)
If the title text is known, you may be able to using viewport units vw for the font-size either in the original style or in the media queries.
You would also need to set the sidebar width to vw too, or a percentage value to make it all responsive.
html, body {
height: 100%;
margin: 0;
}
.sidebar {
border-right: solid;
height: 100%;
float: left;
width: 15vw;
}
.sidebar h1 {
font-size: 4vw;
text-align: center;
}
<div class="sidebar">
<h1>MyTitle</h1>
</div>
jsFiddle
Another solution would be using CSS ellipses, replace the overflow text with "...".
html, body {
height: 100%;
margin: 0;
}
.sidebar {
border-right: solid;
height: 100%;
width: 15%;
float: left;
}
.sidebar h1 {
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="sidebar">
<h1>MyTitle MyTitle MyTitle</h1>
</div>
jsFiddle
There is no 100% sure way when it comes to CSS but the title should normally go onto two lines which would be better than what its doing in your screen shots. Post your code if you want someone to look at that.
What you should do though is use media queries to make the sidebar wider when its on a smaller screen:
.sidebar
{
width:12%;
}
#media screen and (max-width: 600px) {
.sidebar
{
width:30%;
}
}
Here is an example
http://codepen.io/nathanfelix/pen/KzZPGy
Also, here you can read more about media queries:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Please try like this:
<div class="sidebar">
<h1>
MY TITLE
</h1>
</div>
.sidebar {
border-right: 1px solid black;
height: 600px;
width: 186px;
}
Related
I need to reduce the size of the box for mobile devices and cannot remember how to do so.
Currently, everything displays right on a website but on mobile it does not reflect and the box overfills the container
<div class="box">
<img src="img/devban.png" alt="logo"/>
</div>
.cart-btn-m:hover {
background-color: #64af3d;
}
.box {
/* width: 100%; */
width: 800px;
height: 350px;
border: 5px dashed #ffffff;
align-self: center;
}
img {
width: 100%;
height: 100%;
}
you can use media query for it
inside your styles
#media only screen and (max-width: 600px) {
.box {
width: 400px;
}
.img {
width: 80%; // change the values according to your requirement
}
}
for more refer
https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mediaquery
Just remove the width from the .box. The default of the width property is "auto", this means a block-level element, such as a div, will fill up the available space. I would change the width to max-width so the div can shrink (for mobile) but will not expand beyond 800px (for desktop). No need for the extra complexity of a media-query then.
Also you probably want to remove the height property on the img too. Height auto means it will preserve the aspect ratio.
.cart-btn-m:hover {
background-color: #64af3d;
}
.box {
max-width: 800px;
height: 350px;
border: 5px dashed #ffffff;
align-self: center;
}
img {
width: 100%;
}
I am new at HTML and CSS and I want to make a responsive header that contains:
logo picture with margin-left in pixels when full resolution
pogo picture must have it's full size when full resolution
navigation menu with 6 and width of 1500 when full resolution
No Bootstrap. What are your suggestion to accomplish that? What I have made so far is not responsive, on full size (width:1920px) measures are fine and it looks exactly how it should, but when I try to resize browser it is not in one row, even if I declare that div "inner" that contains them is width:100%, and both of them are also width:100%.
Code is something like this:
.inner{
width:100%;
}
.navigation {
display: inline-block;
float: right;
text-align: center;
padding-top:47px;
padding-bottom:27px;
max-width:1555px;
width:100%;
}
.navigation li{
display: inline-block;
width: 16%;
}
.navigation ul{
max-width: 1500px;
}
.wrapper-logo{
display: inline-block;
max-width:365px;
width:100%;
}
.small-logo{
max-width: 143px;
width:100%;
padding-left:220px;
}
<div class="inner">
<div class="logo-wrapper">
<div class="small-logo">
<img src="https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F24%2F31%2Fb7bd820a-ecc0-4170-8f4e-3db2e73b0f4a%2F550250_artsigma.png?auto=format&ch=Width%2CDPR&w=250&h=250">
</div>
</div>
<div class="navigation">
<ul><li>......</li></ul>
</div>
</div>
Use media queries.
Here goes my Desktop resolution css
#media only screen and (max-width: 600px) {
/* Here goes my Mobile resolution css */
body {
background-color: lightblue;
}
}
You'll want something like the following for bullet 1
.small-logo {
margin-left: 10%;
}
#media only screen and (max-width: 600px) {
.small-logo {
margin-left: 0;
}
}
Bullet 2 I'm guessing should say Logo not Pogo. Based on the code provided .small-logo is your only logo so you'd do something like this.
.small-logo{
width: 100%
}
What does the navigation menu have 6 of? Columns? Buttons? Unicorns?
Set the inner class or preferably an id of the largest content div to the max I generally like to center the content and give some side white space so I put the basics in the comments.
.inner{
max-width: 1500px;
width: 100%;
/*width: 85%;
margin: auto 0;*/
}
Are you trying to have logo-wrapper and navigation horizontally aligned?
display: inline-block;
I'm trying to build a page that can run at full screen but as it scales down the divs drop and fit the content and allow scrolling. At fullscreen I'd like one big box with three little boxes on the bottom. The content in the big box changes dynamically so the div needs to be able to scale on a lower resolution device. Also, on a lower resolution device I would like the bottom three boxes to stack on top of one another and all be a fixed width to fit all of their contents. My main issue is text spilling out of the big box and being unreadable on smaller screens.
Here is the HTML:
<body>
<div class="container">
<div class="content">
</div>
</div>
<div class="footer">
<div class="widget1">
<div class="widget_contents">
</div>
</div>
<div class="widget2">
<div class="widget_contents">
</div>
</div>
<div class="widget3">
<div class="widget_contents">
</div>
</div>
</div>
</body>
Here is the CSS:
*{box-sizing: border-box;}
html{height: 100%;}
body{height: 100%;}
.container {
height: 80%;
width: 100%;
padding: 1em;
}
.content {
height: 100%;
width: 100%;
background: rgba(150, 50, 50, 1);
}
.footer {
height: 20%;
width: 100%;
padding-right: 1em;
}
.widget1 {
width: 55%;
height: 100%;
padding-left: 1em;
float: left;
}
.widget2 {
width: 25%;
height: 100%;
padding-left: 1em;
float: left;
}
.widget3 {
width: 20%;
height: 100%;
padding-left: 1em;
float: left;
}
.widget_contents {
height: 100%;
background: rgba(55, 150, 55, 1);
}
Here is a jdfiddles of my basic layout: http://jsfiddle.net/kzoqwz9n/
Thanks!
For allow scrolling, you just need to apply 'overflow:auto;' to your block.
For stack bottom blocks you need to use media queries, something like :
#media screen and (max-width: 600px)
{
.widget1,.widget2,.widget3 {
padding-left: 1em;
float:none;
width: auto;
}
}
This exemple will stack your box when the screen is smaller than 600px.
UPDATE :
For the scrolling thing, we need to apply some changes :
.container {
min-height: 80%;
margin: 1em 1em 0 1em;
background: rgba(150, 50, 50, 1);
}
We delete the style for .content and add 'padding-top: 1em;' to .footer
Exemple here : http://jsfiddle.net/kzoqwz9n/3/
It is what you want to do ? (try to add/remove content)
You basically need media queries to apply different rules depending on the viewport size and possibly device orientation and flexboxes for switching between row and column layout
My main issue is text spilling out of the big box and being unreadable on smaller screens.
set the width to width: fit-content; (+ vendor prefixes) to allow the box itself instead of just the text content to spill out of the parent container
I have a header, it has two parts, left - the big breadcrumb, right - control buttons. Problem - when breadcrumb gets too long, right part drops down, but i want to hide breadcrumbs, not all, but the part that covers buttons. Below is image with short breadcrumb
Currently parent div is
width: auto;
text-align: left;
margin-left: 61px;
Breadcrumb is
display: inline-block;
text-align: left;
width: auto;
max-width: 60%;
overflow: hidden;
white-space: nowrap;
And the right button part is
z-index: 99999;
float: right;
display: inline-block;
I don't know why right part gets pulled down, i want just hide breadcrumb, cannot resolve it in chrome dev tool either.
This is what i want,
Maybe there is a little trick out there, noticed many variations of css display, any ideas?
Crappy demo: http://jsfiddle.net/a796joeq/
I suggest this for the "right button part":
z-index: 99999;
position: absolute;
right: 0px;
top: 0px;
display: inline-block;
Try to follow the proper concept so that you can deliver quality output.
You can use float concept to achieve this. For a better understanding, you can use widths initially.
For parent div use: 100%; For child divs use: 50% , 50% (total can be max of 100%)
Here is a fiddle (http://jsfiddle.net/kiranvarthi/ybt5tc8b/3/) of the below:
.parent { width: 100%; background: green; overflow: hidden; }
.child1 { width: 30%; float: left; color: #fff; }
.child2 { width: 30%; float: left; color: #fff; }
HTML
<div class="parent">
<div class="child">
Child 1 content comes here.
</div>
<div class="child">
Child 2 content comes here.
</div>
</div>
the problem is you margin-left on the parent div. Change it to a percentage
Give Positions for your div's :
Parant Div :
position:relative;
Breadcrumb :
position:absolute;
Add media queries:
#media screen and (max-width: 800px) {
.breadcrumb {
max-width: 50%;
}
}
#media screen and (max-width: 750px) {
.breadcrumb {
max-width: 40%;
}
}
The header of my site is some text and a logo. The font used isnt standard so the text is image based.
I want the elements of the site to change with the size of the browser window. I believe this is called fluid design?
So I want the text and logo in the header to scale and be evenly spaced horizontally. There are 5 letters, then the logo, then 5 more letters. One more curveball, I want the logo to be dead center of the page at all times.
I've looked around and it seems there are multiple ways out there to do this. And all have their own caveats based on ever evolving functionality of html and css, I'm guessing more css than html.
So what would be the best way to do this as of June 8 2014? =P Obviously I want it to work in as many browsers as possible.
There are basically two ways to change your content depending on the screen size:
1. Use percents
If you have some elements which should change their size whenever the user changes the screensize, I would recommend using percents.
.content {
width: 90%;
height: 50%;
}
In this example the class .content will have always a height of 50% and a width of 90% - it will change its pixel-size whenever the user changes the screensize. You can create a very flexible layout with that.
2. #media-querys
If you want to change something more than sizes, you have a static layout or want to create something like a mobile version, css has a #media-query:
#media (min-width: 600px) and (max-width: 1000px) {
.content {
background-color: red;
}
}
If the screen-width is between 600px and 1000px the background-color of .content will change to red. Just put the changes you want the header to do into a #media-query like this and it will work perfectly.
You'll find a very good noob-tutorial for #media-queries at css-tricks.com
Okay I hope this is what you meant with your description of having your logo/type in center of page. Here's the jsfiddle I made for the solution.
here's the code
HTML:
<header>
<div id="wrap">
<div id="container">
<div id="logo"><img src="http://mattfrey.ca/img/springfarm/sf-preview2.jpg" alt="sample image"></div>
<div id="fiveLets">F I V E R</div>
<div class="clearFix"></div>
</div>
</div>
</header>
CSS
header { width:100%; padding:0; margin:0; }
img { height: auto; max-width: 100%; padding: 0;}
#wrap { width:80%; margin:0 auto; outline: solid 1px red; background-color:#ccc;}
#container { margin: 0 auto; width:50%; background-color:#fff; outline: solid 1px blue;}
#logo { width:49%;}
#logo img { background-color: blue; float: left; }
#fiveLets { font-size: 2em; margin-top: 1.35em; float: right; margin-left: 1%; width:49%; }
.clearFix {clear:both}
/*responsive changes*/
#media screen and (max-width: 600px) {
#fiveLets { font-size: 1em; } /*shrink text*/
#wrap { background-color: #666; }
}
}
#media screen and (max-width: 300px) { /*doesn't seem to respond--jsfiddle*/
#fiveLets { font-size: 0.75em; }
#wrap { background-color: #333; }
}
}
1) You have your header, logo and type.
2) the #container brings both elements (logo and type, both of which are floated) closer together, and is also centered to solve that issue.
3) when you adjust the browser width, the css for the #logo img will adjust automatically, but the type, you need to add some responsive css, using media queries.
The jsfiddle doesn't seem to shrink down to 300px, so you will have to test in your own browser.
Hope this helps!