This question already has answers here:
How do i get my image to be responsive?
(4 answers)
Closed 2 months ago.
I am trying to include a logo for my site. It needs to be responsive. With the following CSS the image is OK with width, but the top & bottom of the logo are not displayed. If the site was not responsive, I would just put height: 100px; underneath the width. How can I make all the logo display, including the top and bottom bits of it, but still make the logo responsive?
.header-image .site-title > a {
background: url(images/logo.png) no-repeat left;
float: left;
width: 100%;
}
The rest of the CSS which my be making the top & bottom parts of the logo to not be displayed, is below.
.title-area {
float: left;
padding: 10px 0;
width: 360px;
}
.header-full-width .title-area {
width: 100%;
}
.site-title {
font-size: 32px;
font-weight: 400;
line-height: 1.2;
}
.site-title a,
.site-title a:hover {
color: #333;
}
.header-image .site-title > a {
background: url(images/logo.png) no-repeat left;
float: left;
width: 100%;
}
.site-description {
font-size: 16px;
font-weight: 300;
line-height: 1.5;
}
.site-description,
.site-title {
margin-bottom: 0;
height: auto; /*added by me */
}
.header-image .site-description,
.header-image .site-title {
display: block;
text-indent: -9999px;
}
I suspect that it is something to do with a container?
using a fixed height for an element doesn't automatically make a site "not responsive," but you might consider using min-height: 100px; (or whatever the correct height is) to ensure that important elements of the logo won't be hidden. Depending on what exactly the desired behavior is, you could also (or instead) set a relative height (e.g. height: 100%;)
Another possible approach is to use either the cover or contain keyword value for the background-size property
Related
I'm working on wordpress project for a friend. Unluckily (for me), she decided that site need sticky header which goes beyond my actual CSS understanding. I've created css that helps me center logo and menu below. Now I need help with making it sticky and setting logo in between menu/navbar positions.
Screen of header
[1]: https://i.stack.imgur.com/Vg3PF.jpg
a:focus {
outline: 0;
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&family=Playfair+Display+SC&display=swap');
/* center logo*/
.site-branding{
width:100% !important;
text-align:center;
}
.site-header .site-branding img {
margin: auto;
margin-top: 50px;
margin-bottom: 30px;
max-width: 300px;
}
/* center menu */
nav#site-navigation {
width: 100%;
text-align: center;
margin-right: 0px;
margin-bottom:55px;
font-size: 24px;
font-family: Playfair Display SC;
}
#media (min-width: 768px){
.woocommerce-active .site-header .site-header-cart {
width: 21.7391304348%;
margin: 0 auto;
float:none;
}
.entry-content{
font-family: Open Sans;
}
.h2 {
font-family: Playfair Display SC;
}````
you can use sticky and position : fixed for sticky items.
.sticky {
position: fixed;
top: 0;
width: 100%
}
I was looking for many posts here on stackoverflow, but there was nothing, what could help me. Maybe this question is trivial, but i don't know how to do that, because I am beginner in this
So i have some header, where is logo, menu and some title -that is not problem. Under this header i have div with class slider, where i want to have some background-image and on this background-image i want to have some button and title and another image. And here is finally my question.
What should i do, if i want to have this background-image of this div on full width and with auto height (height from end of header to end of screen) for any screen resolution on desktop?
I mean: if i have resolution 1920x1080 i want to have this bg-image from end of header to end of screen. Same thing for resolution for example 1366x768 etc etc...i hope you understand my question.
Example on this
image
Header is red. And i want to have bg-image (in this case white part of image, but i want to have image there) auto resize for any screen resolution.
I really hope you understand my question and someone can help me.
Really thanks for any reply
http://jsfiddle.net/YKY4t/
I have some errors in code so please...
Code:
#import url(https://fonts.googleapis.com/css?family=Quicksand:400,300,700);
body {
margin: 0;
padding: 0;
}
.mainheader {
width: 100%;
height: 10%;
background-color: #ff5959;
position: absolute;
}
.mainheader img {
max-width: 100%;
height: auto;
margin-left: 20%;
margin-top: 1.5%;
float: left;
}
.title {
position: absolute;
margin-top: 1%;
margin-left: 22%;
font-size: 35px;
font-family: 'Quicksand', sans-serif;
color: #ffffff;
}
.meta {
position: absolute;
margin-left: 18%;
margin-top: 3%;
font-size: 19px;
font-family: 'Quicksand',sans-serif;
font-weight: bold;
color: #ffffff;
}
.nav {
position: absolute;
right: 20%;
margin-top: 1%;
font-size: 19px;
font-family: 'Quicksand', sans-serif;
font-weight: bold;
}
.nav li {
list-style-type: none;
float: left;
}
.nav li a {
color: #ffffff;
text-decoration: none;
display: block;
margin-left: 25%;
}
.slider img {
background-image: url(../img/slider-image.png);
background-repeat: no-repeat;
background-position: center center fixed;
background-size: cover;
}
As i commented, you can use media queries for the different screen sizes where you can use different resolution images. In that case:
#media all and (min-width: 1920) {
.img-holder img{
background-img: url(../img/slider-image.png);
}
}
#media all and (min-width: 1366) {
.img-holder img{
background-img: url(../img/slider-image-medium.png);
}
}
You can use them to use all screen resolutions you want to cover.
You alse can use any responsive framework like Bootstrap which responsives the images.
Trying here: http://alternativegrow.com.au/
to make logo stay centered and shrink to fit as browser resized (instead of getting cut off). I have followed a number of recommended techniques but to no avail...
I am a little unsure which elements I've added or modified are helping or hindering.
What I've added, via custom css plug in for now:
.header-image .site-title > a {
float: left;
max-width: 100%;
height: auto;
background-size: 100% auto !important;
background-position:center;
}
.title-area {
float: left;
padding: 10px 0;
}
.site-header .wrap {
padding: 10px 0;
}
What is in stylesheet:
/* ## Title Area
--------------------------------------------- */
.title-area {
float: left;
padding: 10px 0 10px 15px;
width: 360px;
}
.header-full-width .title-area {
width: 100%;
}
.site-title {
font-size: 24px;
font-weight: 400;
line-height: 1.2;
}
.site-title a,
.site-title a:hover {
color: #fff;
}
.header-image .site-title > a {
background: url(images/logo.png) no-repeat left;
float: left;
min-height: 160px;
width: 350px;
}
.site-description {
font-size: 16px;
font-weight: 300;
line-height: 1.5;
}
.site-description,
.site-title {
margin-bottom: 0;
}
.header-image .site-description,
.header-image .site-title {
display: block;
text-indent: -9999px;
}
.site-description {
color: #fff;
edit - Oh I did try media queries but they also did not work. Specifically I tried adjusting the min-height at different beak points, with width set as auto, expecting the width to adjust relative to the height setting, but in fact the logo just disappeared when I did this. I do not really want to use multiple sized logos for various break points as this seems clunky to me, however it is better than what is here, but this also did not work for me.
Not sure to understand whether the example you point to is what you try to achieve or what you try to modify.
Maybe this example can help you
The important parts are:
1) to make the element which holds the logo as background take all the space available
2) set the background-size at 'contain'
<header>
<div class="logo"></div>
</header>
.logo{
background:url('http://www.vectortemplates.com/raster/batman-logo-big.gif') no-repeat center;
width: 100%;
height: 100%;
background-size:contain;
}
header{
height:200px;
}
I have a bunch of divs inside a container that is equally spaced from the right as well as from the bottom. (i.e margin-right and margin-bottom are the same)
Here is my jsfiddle below:
http://jsfiddle.net/wYCzJ/1/
Here is my css code:
.container {
width: 100%;
height: auto;
display: inline-block;
}
.wrapper {
position: relative;
float: left;
width: 25%;
}
.box {
margin-bottom: 0.5em;
margin-right: 0.5em;
border: 1px solid;
border-color:#DDD;
padding: 0.5em;
height: 150px;
}
.name{
width: 95%;
font-size: 1.2em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
}
.result {
text-align: right;
margin-top: 0.5em;
font-weight: bold;
margin-right: 0.75em;
}
.result-type {
float:left;
display:inline;
font-size: 1.1em;
display: inline;
}
.result-value {
font-size: 1.5em;
display: inline;
}
.no_data {
font-size: 1.2em;
color: darkgray;
}
.date {
position: absolute;
bottom: 1em;
color: gray;
}
Everything works fine as expected, except that the last div box has extra some extra spacing towards the right ( Test 5 box and Test 7 box in this case)
I kinda need the same spacing all around. Is there a workaround for this?
if you add:
body {
margin: 0;
padding: 0;
}
you will have only 5px from the right
it's up to you to make div container to margin 5px from left and top
i managed to twick it:
body {
padding: 0;
margin: 0;
margin-top: 0.5em;
margin-left: 0.5em;
}
tested it in Chrome and FF - http://jsfiddle.net/elen/wYCzJ/3/
found and adopted this version - jsfiddle.net/elen/5CJ5e/131 - see if it works for you
please notice combination of text-align: justify;, font-size: 0; and heights for both outer and inner boxes. also use of <span class="stretch"></span> for 100% width
Your probleme is simple, the body have a natural margin.
body{margin-right:0px}
That solve your probleme, but it's a bit wierd to have a bodywith only the margin-right at 0...
The overall container has spacing for its top, bottom, left, and right. Your individual boxes only have spacing on the bottom and right. The reason you are seeing "extra" spacing on the right is because the spacing for the individual box and the overall container are being added together.
A possible sollution with nth-child. This removes the margin of every 4th .box element.
.wrapper:nth-child(4n) .box{
margin-right: 0;
}
http://jsfiddle.net/wYCzJ/5/
Have a look at browser support of nth-child at caniuse.
I have a few css sprites for a rating system: http://i.imgur.com/qeb2b.png
When loading the thumbs
.thumb-down {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px;
width: 15px;
height: 16px;
}
.thumb-up {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px;
width: 15px;
height: 16px;
}
The only way I can get the thumbs to show up is if I do this:
Was this review helpful? |
If I remove all the then the thumbs disappear. If I leave only one then it shows a partial view of the sprite.
How can I display the sprite without the need of ?
by using float:left:
.thumb-down {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px;
width: 15px;
height: 16px;
float: left; /* OR float:right, depending on what you need */
}
.thumb-up {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px;
width: 15px;
height: 16px;
float: left;
}
As the links are inline elements, you can't specify the width and height for them. They get their size only from their contents, that's why the spaces gives them size.
I think that the best option for your use is to make the links inline-block elements. That way they are block elements so that they can have a specific width and height, but they are still inline elements in the text flow so that you don't have to change your markup.
.thumb-down {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px;
display: inline-block;
width: 15px;
height: 16px;
}
.thumb-up {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px;
display: inline-block;
width: 15px;
height: 16px;
}
The image is a background. But for the background to be visible, the element must have some height and width. In your case an empty tag has no height and width. You should make it display:block
Just use display: inline-block; in both of your CSS classes.