I want to have the logo at the bottom right corner fixed at that position no matter the screen size whether the screen size is below 768px or above using CSS.
Below is an excerpt of the HTML and CSS code I wrote.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>
<!-- Logo and Menu here-->
</header>
<main>
<h1 class="brand-name">Brand Name Here</h1>
<h4 class="brand-slogan">Brand Slogan here</h4>
<p class="message">The message goes here</p>
<section class="social-icons">
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
<img class="logo" src="" alt="" />
</section>
</main>
Excerpt of CSS Code Starts Here
.brand-name {
property: value;
}
.brand-slogan {
property: value;
}
.message {
property: value;
}
*The Issue is how to place these two (social icons and the logo) side by side and push the logo to the extreme right using css's flexbox*
**.social-icons {
property: value;
}
.logo {
property: value;
}**
Exactly how I want it done has been shown in the image below
Between your first paragraph and the comment in your pseudo CSS code, what you are asking is not very clear.
To place the social icons and the logo side by side and push the logo to the extreme right, you need a margin-left: auto on the logo.
.social-icons {
display: flex;
flex-flow: row wrap;
}
.logo {
margin-left: auto;
}
If the logo position needs to be fixed at the bottom right of the screen, you need to use position: fixed instead.
.social-icons {
display: flex;
flex-flow: row wrap;
}
.logo {
position: fixed;
bottom: 0;
right: 0;
}
If both the social icons and the logo should be at the bottom of the screen and the logo should be pushed to the right, The position should be set on social icons and you need to set either width: 100% or inset-inline: 0 to take all the width of its parent (here main).
.social-icons {
display: flex;
flex-flow: row wrap;
width: 100%;
position: fixed;
bottom: 0;
}
.logo {
margin-left: auto;
}
Add a wrapper <div> around the icons. Then, on the outer main wrapper add flexbox like this:
.outer-wrapper {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 100%;
}
You will probably need to make the icons div a flexbox too so they are in a row. I'd then, for semantics actually make the outer container the section and the social icons container the div.
Well, I realised I could have use background-image like this. Assuming my class/id name is bg-img, it could have been like this:
bg-img: {
background-image:url(image_path_here);
background-repeat: no-repeat;
background-position: right bottom;
}
Related
nav {
display: flex;
justify-content: space-between;
width: 100%;
position: fixed;
text-align: center;
}
.logo {
width: 10%;
}
<nav>
<div class="logo">
<img src="img/Logo.png" alt="Business logo" />
</div>
<div class="links">
Home
About
Products
Blog
Contact
</div>
</nav>
When declaring a class in HTML and then invoking in CSS i am having an issue trying to resize an image in the NAV to be smaller. Once looking at the image in the VS code live function i can get the image to go bigger but not smaller. im a bit confused but i am sure it is something small. would anyone be able to look at this and see whare i am messing up?
It will work better if you designate the class on the image you want to resize. For example, you have logo on your parent div that's nests the image, put the class directly on the image. See the changes I made below.
I added a 500x500px dummy image to demonstrate the size change. So if you declare a width: 10%; on an image with an intrinsic size of 500x500, it will render around 50px for the width (depending on the viewport).
.logo {
height: 100%;
width: 10%;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
position: fixed;
}
.logo-parent {
width: fit-content;
}
.links {
white-space: nowrap;
}
<nav>
<div class="logo-parent">
<img src="https://dummyimage.com/500x500/000/fff&text=I'm+Resizing" alt="Business logo" class="logo" />
</div>
<div class="links">
Home
About
Products
Blog
Contact
</div>
</nav>
There are a few ways that you can fix this problem. One is just not to use the CSS and use the width and height built into the image tag.
here is an example of that.
<img src="img/Logo.png" alt="Business logo" width="100"/>
Another way it to give your image a class of logo
<img src="img/Logo.png" alt="Business logo" class="logo" />
I'm trying to learn flex and still a beginner to CSS.
I'm trying to make a flex that shows 4 images next to each other, all images are the same size. When I add an anchor element around the img, it does this weird overlapping instead of changing the image size, I think it's changing the size of the anchor but leaving the images at full size. How can I fix this? also, using scss not css.
HTML:
<div class="row">
<a href="#"
><img src="images/restaurants/logo1.png" alt="Branch 1 logo"
/></a>
<img src="images/icons/menu.png" alt="Menu icon" />
<img src="images/icons/map.png" alt="Map icon" />
<img src="images/icons/call now.png" alt="Call Now" />
</div>
(scss):
.card {
.row {
display: flex;
max-width: 100%;
padding: 0% 0.2rem 0 0.2rem;
padding-top: 0.5rem;
}
.row > * {
width: 23.5%;
flex-basis: 1;
margin: auto;
}
Thanks
add CSS below style in CSS file
img{
width:100%;
}
In <body> <section> I have background image:
<img src="img/background.png" class="back-img">
css:
.back-img {
width: 100%;
height: auto;
overflow:hidden;
}
like this:
<section>
<div id="topLine">
<img src="img/background.png" class="back-img">
</div>
</section>
I'm trying to align different separate square images of same size horizontally in the center over background image in browser window with position: fixed; to keep it in the center of screen with scrolling and organize vertically on mobile screen:
<img src="img/square1.png" class="image">
<img src="img/square2.png" class="image">
<img src="img/square3.png" class="image">
.css:
.image {
position: fixed;
width: 69px;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
to archive something like this:
Background color implies background picture and white squares is a same size images.
I've tried this example:
<div class="row">
<div class="column">
<img src="img/square1.png">
</div>
<div class="column">
<img src="img/square1.png">
</div>
<div class="column">
<img src="img/square1.png">
</div>
</div>
with:
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
.row::after {
content: "";
clear: both;
display: table;
}
which not organizes images as required in my case and should align pictures in one line, but with position: fixed; I have only one image on screen.
I'm trying to find some correct way to get result, maybe with using of <table>, <tr>, <td> to organize different images according screen size from horizontal to vertical group line automatically with browser window manual narrowing.
First of all, I have to repeat same image in horizontal line in center over background image in fixed position:
Any guide or example would be helpful
CSS grid or flex would be ideal for this (assuming modern-ish browsers).
It's not clear to me why you require an img element for your background image, but I've had plenty of reasons in the past so this would need a little extra to use an img element .
Here is the most basic example of my interpretation of what you're looking for: https://codepen.io/Ilkai/pen/abNdZQK
Basically:
Set up your section with a background-image, and also use it as your source of the container size (full screen with 100 vw/vh)
<section class="bg">
...
</section>
.bg {
background-image: url('...');
background-size: cover;
width: 100vw;
height: 100vh;
}
Create a div that will be dedicated to being your layout parent, with using display: flex/grid (Flexbox is slightly older than Grid, so it has a bit better support). Center children with align-items and justify-content.
<section class="bg">
<div class="layout">
...
</div>
</section>
.bg { ... }
.layout {
width: inherit;
height: inherit;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
You'll also apply your media query to the layout div.
.bg {...}
.layout {...}
#media (min-width: 720px) {
.layout {
flex-direction: row;
}
}
Add your img elements as children of the layout div, size accordingly.
<section class="bg">
<div class="layout">
<img src="..." />
<img src="..." />
<img src="..." />
<img src="..." />
</div>
</section>
.bg {...}
.layout {...}
#media (...) {}
.layout img {
width: 6rem;
height: 6rem;
object-fit: cover;
margin: 1rem;
}
If I have misunderstood what you're after let me know in the comments
With position: fixed the images are likely overlapping.
Try wrapping them in a fixed element, and letting them be children in that element, you could then either use display: inline block; text-align: center; or display: flex; justify-content: center; to achieve your goal.
I recommend using flex as you can very easily change this for your mobile CSS.
I'm trying to put a logo on the top left corner, and text parallel to the logo (top center).
The text should have the same distance from both sides of the page regardless of the logo.
I tried adding around "display: table; display: table-cell; position: relative; position: absolute;"
But the best I can get is text being centered but not on the same line as the logo but a bit low.
html:
<header class="header">
<div class="logo">
<img src="logo.gif" alt="a logo">
</div>
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
</header>
css:
.header {
border: 2px solid black;
width: 100%;
}
.logo img {
width: 80px;
}
.header-text {
text-align: center;
}
example image:
You could use position: absolute; and i've added the position to the title and gave it a wrapper together with the image so you can move them together.
I've also added some margin to show you the title stays centered
.header {
border: 2px solid black;
width: 100%;
position: relative;
}
.wrapper {
width: 100%;
position: relative;
margin: 30px 0;
}
.logo {
display: flex;
}
.logo img {
width: 80px;
}
.header-text {
text-align: center;
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
<header class="header">
<div class="wrapper">
<div class="logo">
<img src="https://via.placeholder.com/150" alt="a logo">
</div>
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
</div>
</header>
use flexbox!
.header {
border: 2px solid black;
width: 100%;
display:flex;
justify-content:space-between;
align-items:center;
}
img ,#spacer{
width: 80px;
}
.header-text {
text-align: center;
}
<header class="header">
<img src="https://via.placeholder.com/150" alt="a logo">
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
<div id='spacer'></div>
</header>
There a numerous ways to go about this; I'll describe one method here.
Basically, you need to get the logo out of the layout flow so that the text can be centered without being affected by it. the easiest way to do this is by adding position: absolute to the logo.
Thus, a complete example might look like:
.header {
/* Allows the logo to be positioned relative to the header */
position: relative;
/* Centers the text — can be done other ways too */
text-align: center;
}
.header .logo {
position: absolute;
left: 0;
}
A JSFiddle Example: https://jsfiddle.net/g01z27tv/.
Keeping Proper Alignment
If you want to keep the logo and the text properly (vertically) aligned, flexbox will be your friend here.
First, ensure that the header is taller than the logo will be; otherwise the logo will be cut off.
Next, create a wrapper <div> for your logo. In your case:
<header class="header">
<div class="logo-wrapper">
<div class="logo">
<img src="logo.gif" alt="a logo">
</div>
</div>
<!-- ... -->
</header>
Now, add some styles for .logo-wrapper. Namely:
cause it to expand to fill the height of the header,
make it a flex container,
make its items' vertically centered,
make it position: absolute, and
position it to the left of the header:
.logo-wrapper {
height: 100%;
display: flex;
align-items: center;
position: absolute;
left: 0;
}
Note that you should now remove position: absolute and left: 0 from .logo, since we are positioning the wrapper instead.
Lastly, in order to properly align the text, we'll use flexbox on .header:
.header {
display: flex;
justify-content: center; /* Use this instead of text-align: center */
align-items: center;
}
You'll note now that even when you make the logo taller—as long as the header is taller—everything stays aligned.
An Update JSFiddle Example: https://jsfiddle.net/oL5un8gb/.
Note: I created a separate wrapper <div> in this example; in your case you probably don't need to because you have a separate <div> and <img> already. You might be able to get it to work without an extra element.
.header {
border: 2px solid black;
width: 100%;
}
.logo {
float: left;
}
.header-text {
text-align: center;
position: absolute;
width:100%;
margin: auto;
}
.header::after {
content: "";
clear: both;
display: table;
}
<header class="header">
<div class="logo">
<img src="https://via.placeholder.com/75" alt="a logo">
</div>
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
</header>
As suggested in comments I have edited the text to be centred to 100% width.
I have created a showcase section where in I have used flexbox to align images to the right. However when I shrink the size of the window, the images go out of the window. I am looking for something like this: http://jsfiddle.net/xLc2Le0k/15/
Here is the snippet for HTML:
<div class="showcase shadow">
<div id="places">
<p class="category">Places</p>
<div>
<img src="img\Taj Hotel.png" alt="">
</div>
<div>
<img src="img\Gateway of India.png" alt="">
</div>
<div>
<img src="img\Shack at Goa.png" alt="">
</div>
</div>
<p class="more-text">View more...</p>
</div>
Here is the snippet for SCSS:
.showcase {
width: 100%;
margin-top: 5%;
display: inline-block;
#places {
width: 100%;
display: flex;
div:nth-of-type(1) {
align-self: flex-end;
}
div {
margin-left: 0.5%;
}
}
}
Here is the link for the live web page: https://swizzx.github.io/Photography-Portfolio/
Just a heads up, I have tried setting the width of the parent and the element to 100%, when I do so, it shrinks but does not work as how I want it to like in the JSFiddle provided above. On the contrary setting the width to 100% makes the first image equal to the size of the others which I don't want.
You should add below css property to the flex container. It wraps elements automatically to the next line when you shrink the window.
flex-wrap: wrap;
One thing you are missing in your code is applying 100% width to your img tag. Give img 100% width and it will work the same way you want.
#places div img {
width: 100%;
}
Actually it was the paragraph in the #places div that was causing the images to shrink much more than required. Figured out that had to place it out of the #places div and inside the .showcase div like :
<div class="showcase shadow">
<p class="category">Places</p> // like this
<div id="places">
<div>
<img src="img\Taj Hotel.png" alt="">
</div>
<div>
<img src="img\Gateway of India.png" alt="">
</div>
<div>
<img src="img\Shack at Goa.png" alt="">
</div>
</div>
<p class="more-text">View more...</p>
</div>
and than setting the width of the images to 100% like gagan mentioned :
.showcase {
width: 100%;
margin-top: 5%;
display: inline-block;
#places {
width: 100%;
display: flex;
justify-content: flex-end;
div:nth-of-type(1) {
align-self: flex-end;
}
div {
margin-left: 0.5%;
img {
width: 100%; //width to 100%
}
}
}
}