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" />
Related
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;
}
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 currently building a website (wesurf.co.il) and I'm having some trouble with the logo part. Im trying to make the logo stay on the left side ( next to the central menu).
while on 1920x1080 it looks good, in other resolution's the logo just blend with the menu or dissapearing.
thanks for helping.
http://prntscr.com/l3zprs you can set it like this change css for <a> </a> and <img/>
Try this code hope it will help :
<div style="display:flex; align-items: center; background:#888;">
<div class="logo-img"> logo </div>
<div class="menu" style="margin:auto;"> menu </div>
</div>
You can use this CSS. Also, you should use a SVG logo so it can scale on any device.
.logo-img {
width: 100%;
}
#header .nav-main.boxed{
max-width: 843px;
}
#header .logo {
padding-top: 10px;
padding-bottom: 10px;
float: left;
width: calc(100% - 873px);
}
Hi I'm trying to create an image gallery that centers rows of images with fixed dimensions. The issue is the number of images in each row will change depending on the window size so I can't use mutiple containers and margin: auto them. Here is an example page that does what I'm after:
http://inspire-gwen.tumblr.com/
You'll notice that as you change the size of the window, the image rows change, but each one is still centered on the page. Is it possible to implement this with purely CSS? This is the code I have written, with some random images:
HTML
<!DOCTYPE HTML>
<body>
<div class="img_container">
<div><img src="http://www.tolooeyaran.com/wp-content/uploads/2014/09/City-Of-Paris-France-Tour-Eiffel-640x360.jpg"></div>
<div><img src="https://lh3.googleusercontent.com/-h0DGPrWkU-M/AAAAAAAAAAI/AAAAAAAABJY/0l_GW_IzQk4/photo.jpg"></div>
<div><img src="http://i.imgur.com/ElxvqJK.jpg"></div>
<div><img src="http://i-cdn.phonearena.com/images/articles/168223-image/First-HTC-One-M9-wallpaper.jpg"></div>
</div>
</body>
CSS
.img_container img {
max-height: 300px;
display: block;
width: auto;
height: auto;
vertical-align: bottom;
}
.img_container div {
padding: 5px;
}
Images are by default inline items, wrapping them in 'div' tags is currently causing them to be block items. You could get by with simpler with this:
HTML
<!DOCTYPE HTML>
<body>
<div class="img_container">
<img src="http://www.tolooeyaran.com/wp-content/uploads/2014/09/City-Of-Paris-France-Tour-Eiffel-640x360.jpg">
<img src="https://lh3.googleusercontent.com/-h0DGPrWkU-M/AAAAAAAAAAI/AAAAAAAABJY/0l_GW_IzQk4/photo.jpg">
<img src="http://i.imgur.com/ElxvqJK.jpg">
<img src="http://i-cdn.phonearena.com/images/articles/168223-image/First-HTC-One-M9-wallpaper.jpg">
</div>
</body>
CSS
.img_container {
text-align: center;
}
.img_container img {
max-height: 300px;
width: auto;
height: auto;
vertical-align: bottom;
margin: 5px;
}
Yes, this is very possible..
so far you have been using px to define the image width... what you need is %.
Here is the JSFIDDLE: http://jsfiddle.net/uh1wvaev/2/
Here is my code:
HTML
<div class="img_container">
<div class="img_wrapper">
<img src="http://www.tolooeyaran.com/wp-content/uploads/2014/09/City-Of-Paris-France-Tour-Eiffel-640x360.jpg">
</div>
<div class="img_wrapper">
<img src="https://lh3.googleusercontent.com/-h0DGPrWkU-M/AAAAAAAAAAI/AAAAAAAABJY/0l_GW_IzQk4/photo.jpg">
</div>
<div class="img_wrapper">
<img src="http://i.imgur.com/ElxvqJK.jpg">
</div>
<div class="img_wrapper">
<img src="http://i-cdn.phonearena.com/images/articles/168223-image/First-HTC-One-M9-wallpaper.jpg">
</div>
</div>
CSS
.img_wrapper {
width: 25%;
float: left;
}
img {
width: 100%;
}
What I did was, I gave each <DIV></DIV> a class of "img_wrapper". Then I gave each img_wrapper a width of 25% of the page. Therefore whenever the page is resized, the img will be given a width of 25% of the new window size.
If you have any questions, or need further assistance please leave a comment below