Inside my three blocks, I have an svg image, but I have it like this:
.rating {
text-align: center;
background-color: var(--light-grayish-magenta);
color: var(--very-dark-magenta);
font-weight: 700;
border-radius: 7px;
max-width: 26em;
margin-left: auto;
margin-right: auto;
}
.rating::before {
content: '';
width: 5.625em;
height: 1em;
display: block;
background-image: url(images/icon-star.svg);
background-repeat: space;
}
And I have a #media query set.
#media screen and (min-width: 21.885em) /* breakpoint 350px phones ---> tablets */ {
.status {
max-width: 20em;
margin-left: auto;
margin-right: auto;
}
.rating {
padding: 0.9em;
}
.rating::before {
margin-right: 0;
margin-left: 0;
margin-bottom: 7px;
display: block;
max-width: 300px;
}
HTML CODE:
<div class="status flow-content">
<div class="rating">Rated 5 Stars in Reviews</div>
<div class="rating">Rated 5 Stars in Report Guru</div>
<div class="rating">Rated 5 Stars in BestTech</div>
</div>
Though when the screen shrinks so does the image and it sort of flips from side to side. I tried margins left, right, displays can't figure it out though.
Any advice?
I cannot seem to replicate the issue you are having with the code you provided. I did however manage to center align the stars and it was being more friendly that way. Try adding the following to '.rating::before' in your CSS elements.
margin: 0 auto;
Related
My code is here: https://jsfiddle.net/yaphurt0/8/
I tried to get rid of the rest of the webpage to show just the necessary section, but it ended up not displaying correctly, and I couldn't figure out why for the life of me.
Regardless, I've trimmed away what I could and marked in comments in the css file the relevant code.
My problem is that I am trying to display 3 boxes at the bottom of the page next to each other. As the window shrinks I use a media query to increase the width of the boxes so there are 2 per line, and then 1 if the the window shrinks further. Of course this means the boxes take up more room vertically, meaning they spill out as the parent div doesn't scale with it.
I have tried overflow: auto; to #me, however this just added a scrollbar to the content, when instead I want the #me to scale accordingly to contain its children. This is a pretty big problem which is stumping me, as you can see from the main text ("Hi I'm Danny..."), that also suffers from the same issues if the webpage is made very wide and shallow.
As much as I'm looking for a solution, I'm really hoping for an explanation so I can understand why the webpage is behaving as it is/what makes the parent scale, so in the future I don't just copy and paste and hope.
#me {
width: 100%;
height: 45%;
background-color: white;
}
#me .container {
width: 60%;
height: 100%;
margin: 0 auto;
}
#me .container .introduction {
height: 30%;
margin-bottom: 5%;
}
#me .container .introduction .title,
.subInfo {
width: 80%;
color: #262626;
text-align: center;
margin: 0 auto;
border-bottom: 2px solid orange;
}
#me .container .introduction .title {
font-family: 'Unica One', cursive;
text-transform: uppercase;
font-size: 4vw;
}
#me .container .introduction .subInfo {
text-align: center;
font-family: 'Unica One', cursive;
text-transform: uppercase;
font-size: 2vw;
}
#me .container .infoBody {
width: 100%;
height: 50%;
min-height: 75px;
margin: 0 auto;
}
#me .container .infoBody .columnInfo {
float: left;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 31.5%;
margin: 2px;
background-color: orange;
border: 2px solid #e8eaed;
border-radius: 5px;
}
#media only screen and (min-width: 500px) and (max-width: 1000px) {
.minimalHeading {
font-size: 5.5vw;
}
#me .container .infoBody .columnInfo {
width: 48.5%;
margin: 0 auto;
}
.minimalHeading .contactMe a {
font-size: 4vw;
}
}
#media only screen and (max-width: 500px) {
.minimalHeading {
font-size: 7.5vw;
}
#me .container .infoBody .columnInfo {
width: 90%;
margin: 0 auto;
}
.minimalHeading .contactMe a {
font-size: 5vw;
}
}
<div id="me">
<div class="container">
<div class="introduction">
<p class="title">My Skillset</p>
<p class="subInfo">The standard Web-development stuff</p>
</div>
<div class="infoBody">
<div class="columnInfo">Hi</div>
<div class="columnInfo">There</div>
<div class="columnInfo">You!</div>
</div>
</div>
</div>
The problem is in float:left property of the .columnInfo element and the height: 45% of #me element. If you remove those, you will see that #me will contain all three .columnInfo elements, but they will be stacked on top of each other. You can use display:flex on the .infobody to make them wrap next to each other. You will have to give your .columninfo elements an absolute height though.
You can use flex, like mentioned. Or simply add a clear to infoBody, like so:
// html
<div class="infoBody clear">
//css
.clear::after {
content: '';
display: table;
clear: both;
}
The problem is your .columnInfo. Elements with the float property are no longer part of the normal flow of the page, so the containing div doesn't know how high they are. The clear solves this problem by adding a hidden pseudo element below those columns and forcing the containing div down.
on my website, I want to have 6 'image boxes' (3 in one 'row' and 3 in below 'row'). When I change the size of my screen/tab then these 6 image boxes should be always seen completely. They should always fit into the screen size. My code works somehow but not on the bottom. Only one part of the cards in the second row can be seen after decreasing screen size after a certain amount.
Also, I want my content to take 100% of the screen without a scroll bar popping up.
The web content is divided into 2 parts: The top layout and the imagebox.
this is basically my css-file:
* {
font: 18px Verdana;
font-size: 22px;
}
html{
height: 100%;
}
body {
font: 18px Verdana;
height: 100%;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 30px;
margin-top: 30px;
overflow: hidden;
}
#topLayout {
height: 190px;
margin-bottom: 10px;
}
#imagebox {
height: 80%;
margin-bottom: 0px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.box{
cursor: pointer;
flex: 0 1 32.5%;
margin-top: 1.2%;
}
and this is my html code:
<body>
<div id="topLayout">
<div id="block1">
.....
</div>
<div id="block2">
....
</div>
</div>
// the images are appended to the imagebox tag in the .js file via a
function
<div id="imagebox"></div>
</div>
Thank you very much in advance.
Maybe it helps you. Try this
#imagebox {
position: absolute;
width: 100%;
top: 230px;
bottom: 0;
left: 30px;
right: 30px;
}
Here is a example
I have a logo image with some transparency in it. How can I align the logo image to the center on the fixed navbar and then move it slightly to the left on smaller devices so that the content on the right can fit on the navbar?
I have tried background-size: cover but makes the image responsive and the logo gets cut off. I tried background-size: contain but then I lose the background color of the navbar on larger devices.
Is there a way I can move the image to the html to achieve what I need?
Here is my attempt on plnkr:
https://plnkr.co/edit/Uij12vHwFuaeAS91nYUL?p=preview
thanks
UPDATE:
I am trying a different approach and moved the image into the html and try to use the css flexbox approach. Almost there, but need to remove the gap.
HTML:
<nav class="navbar navbar-fixed-top">
<div class="search">
<i class="fa fa-search"></i>
</div>
<a class="brand-logo" href="#/">
<img src="https://i.imgsafe.org/1963cc1736.png" />
</a>
<aside>
<figure class="account-balance">
<span>de 88,980.7740</span>
<i class="fa fa-user"></i>
</figure>
</aside>
</nav>
CSS
nav.navbar {
border: 0;
color: #FFF;
height: 40px;
min-height: 40px;
z-index: 1;
display: 0;
-webkit-box-pack: justify;
-moz-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.search,.filler,aside,figure {
height: 100%;
}
.search,.filler,aside {
background: #266224;
float: left;
}
.search,aside {
flex-grow: 1;
-webkit-flex: 1;
}
.search .fa-search,figure > span {
display: inline-block;
margin-top: 12px;
}
.search {
padding: 0 12px;
}
.brand-logo img {
height: 40px;
max-width: 100%;
}
figure {
float: right;
}
figure.account-balance {
padding-right: 12px;
}
figure > span {
line-height: 25px;
margin-top: 8px;
padding-right: 5px;
}
Here is the modified version using flexbox:
https://embed.plnkr.co/wSWpIDIoJOiSQYVvwHMU/
This does come close to resolving the problem however, this is not working well on iPhone 6 and old iPad.
There is a slight gap on either side of the anchor tag (maybe half a pixel gap), I have tried the solution mentioned here: css flex layout not working on some iPads but it doesn’t work.
Do you know a way to remove the gap?
Try to write specified styles for different device width using this.
try this:
ul li {
height: 180px;
width: 180px;
background: #f6304c;
display: block;
color: #ffffff;
text-align: center;
margin: 2% 0 0 30%;
padding: 50px 0;
}
for mobile device
#media screen and (min-width: 678px) {
ul li {
height: 180px;
width: 180px;
background: #f6304c;
display: block;
color: #ffffff;
text-align: center;
float:left;
/ margin: 2% 0 0 30%;*/
padding: 50px 0;
}
}
use this
.brand-logo {
background: url(https://i.imgsafe.org/1963cc1736.png) left center no-repeat;
background-size: contain;
background-position: center;
background-color: #266224;
height: 100%;
}
the only thing you have to do is fill the O in your logo with the color because it is transparent XD
if you go and reduce the width of the window to view the screen as if it were a mobile device you can see that the orange "badges" may not be entered (especially when only one badge fits per line) I want it to fit more badges in if possible whilst always keeping the badge, or group of badges on that line entered horizontally. The class is badge that isn't being centered Thank you in advance!! :)
jsfiddle: http://jsfiddle.net/avg24wrk/
This is the HTML
<div class="container">
<div class="sidebar">
<div class="sidebar-inner">
<p class="badge"><span class="vertical-align">Book a Free Consultation!</span></p>
<p class="badge"><span class="vertical-align">Second Point</span></p>
<p class="badge"><span class="vertical-align">Third Point</span></p>
</div>
</div>
and this is the CSS
* {
border: 0;
margin: 0;
padding: 0;
}
.sidebar {
float: left;
width: 25%;
color: #505050;
}
.sidebar-inner {
margin: 0 30px 0 35px;
}
.badge {
margin: 10px auto;
font-size: 24px;
text-align: center;
border-radius: 7px;
padding: 20px 20px;
background-color: #ed9727;
cursor: pointer;
}
#media screen and (max-width: 490px) {
.sidebar {
width: 100%;
}
.sidebar-inner {
padding-bottom: 20px;
border-bottom: 2px solid #505050;
margin: 0 30px;
overflow: hidden;
}
.badge {
float: left;
margin: 15px 10px;
max-width: 150px;
min-height: 50px;
display: table;
}
}
have you tried adding text-align: center; to class you want to center
since i you didn't mention which class you want to center so i will give you a simple rule try this
please mention class you want to center
I'm using Bootstrap and I have a carousel under my navbar.
It works OK on normal computers, check this link.
However, I'm having trouble on smaller screens, e.g. iPhone. Just resize your browser screen to see what I mean.
I'm figuring maybe it isn't necessary the responsive CSS but something else I' doing wrong. Maybe their are better ways to get the carousel image with resized on every screen.
Also, I would like the carousel to have a 100% height of the screen, so the carousel spans the entire screen, and the rest of the content shows only when you scroll.
CSS I'm using:
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-top: -80px;
position: fixed;
width: 100%;
}
.carousel .container {
position:relative;
z-index: 9;
}
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
z-index: 10;
}
.carousel .item {
min-height: 800px;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: auto;
margin-top: -200px;
}
.carousel-caption {
background-color: transparent;
position: static;
max-width: 550px;
padding: 0 20px;
margin-top: 200px;
}
.carousel-caption2 {
background-color: transparent;
position: static;
max-width: 380px;
padding: 200px 20px;
}
.carousel-caption h1,
.carousel-caption .lead,
.carousel-caption2 h1,
.carousel-caption2 .lead {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel-caption .btn,
.carousel-caption2 .btn {
margin-top: 10px;
}
#wrapper-container {
margin-bottom: -80px;
padding-bottom: 80px;
position: relative;
background: inherit;
top: 60%;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 80px 0; /* Space out the Bootstrap <hr> more */
}
.featurette {
padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
overflow: hidden; /* Vertically center images part 2: clear their floats. */
}
.featurette-image {
margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
}
/* Give some space on the sides of the floated elements so text doesn't run right into it. */
.featurette-image.pull-left {
margin-right: 40px;
}
.featurette-image.pull-right {
margin-left: 40px;
}
/* Thin out the marketing headings */
.featurette-heading {
font-size: 50px;
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
#media (max-width: 979px) {
.container.navbar-wrapper {
margin-bottom: 0;
width: auto;
}
.navbar-inner {
border-radius: 0;
}
.carousel .item {
min-height: 500px;
}
.carousel img {
min-width: 100%;
height: auto;
}
.featurette {
height: auto;
padding: 0;
}
.featurette-image.pull-left,
.featurette-image.pull-right {
display: block;
float: none;
max-width: 40%;
margin: 0 auto 20px;
}
}
#media (max-width: 767px) {
.navbar-inner {
margin: -20px;
}
.carousel {
margin-left: -20px;
margin-right: -20px;
}
.carousel .container {
}
.carousel .item {
height: 300px;
}
.carousel img {
height: 300px;
}
.carousel-caption {
width: 65%;
padding: 0 70px;
margin-top: 100px;
}
.carousel-caption h1 {
font-size: 30px;
}
.carousel-caption .lead,
.carousel-caption .btn {
font-size: 18px;
}
.marketing .span4 + .span4 {
margin-top: 40px;
}
.featurette-heading {
font-size: 30px;
}
.featurette .lead {
font-size: 18px;
line-height: 1.5;
}
}
There's a lot you would need to do to clean it up... The following will get you started, but there would definitely be a bit more tweaking to do.
I didn't look at the CSS to fill the screen with an image as per your last request. I think you will have to look at adding a different carousel with other cropped images with a portrait aspect ratio if you want that, so you show the specific part of the image you want.
Firstly under #media (max-width: 767px), remove:
.navbar-inner {
margin: -20px;
}
It's causing your menu bar at the top to shift up out of sight.
From #media... .carousel, remove:
margin-left: -20px;
margin-right: -20px;
This is messy, and is there because of the padding added to body (see below).
Add the following to #media (max-width... .carousel:
position: relative;
margin-top: 0px;
Because you want the carousel to sit neatly under the navbar.
Remove the following from #media... body
padding-right: 20px;
padding-left: 20px;
This is causing problems for the carousel, and you can add this padding for specific divs like wrapper-container if you want.
From .carousel img, remove:
margin-top: -200px;
Next, you have to fix the fact that the text under the carousel is moved way down:
Add the following to #media... #wrapper-container
top: 0;
Remove the following from #media (max-width: 979px)
.carousel .item {
min-height: 500px;
}
and the following from #media (max-width: 767px)
.carousel img {
height: 300px;
}
because the carousel is nowhere near that height at smartphone sizes.
You will also have to play around with the positioning of the caption text in the #media CSS. You may want to decide to lose some caption text as the carousel shrinks.
This will get you started, and you can go from there...
For starters, get rid of the margin-top: -200px; on your .corousel img style.
With a small screen, your image height is less than 200px and this causes it to go off of the screen.