I am trying to replace a header content when the screen height decreases by removing a large image I have in a div which is basically a logo and placing it as a little logo in the center at the top of the middle of the page only when the screen height goes from 800px and below.
Below is the code to give you an idea of what the header container looks like.
Header.jsx
import React from 'react'
import './header.css'
import CTA from './CTA'
import Logo from '../../assets/fts_blacks1.png'
import HeaderSocials from './HeaderSocials'
const Header = () => {
return (
<header>
<div className="container header__container">
<h5>Welcome To</h5>
<h1>Favourite Tech Solutions</h1>
<h5 className="text-light">The Digital Interdependence</h5>
<CTA />
<HeaderSocials />
<div className="me">
<img src={Logo} alt="Logo" />
</div>
<a href="#contact" className='scroll_down'>Scroll me</a>
</div>
</header>
)
}
export default Header
header.css
header{
/* height: 100vh; */
padding-top: 7rem;
overflow: hidden;
}
.header__container{
text-align: center;
height: 100%;
position: relative;
}
/* cta section */
.cta{
margin-top: 2.5rem;
display: flex;
gap: 1.2rem;
justify-content: center;
}
/* header socials section */
.header_socials{
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
position: absolute;
left: 0;
bottom: 3rem;
}
.header_socials::after{
content: "";
width: 1px;
height: 2rem;
background: var(--color-primary);
}
/* header image section */
.me{
background: linear-gradient(var(--color-primary), transparent);
width: 22rem;
height: 30rem;
position: absolute;
left: calc(50% - 11rem);
margin-top: 4rem;
border-radius: 12rem 12rem 0 0;
overflow: hidden;
padding: 7.5rem 2.5rem 1.5rem 4rem;
}
/* scroll section */
.scroll_down{
position: absolute;
right: -2.3rem;
bottom: 5rem;
transform: rotate(90deg);
font-weight: 300;
font-size: 0.9rem;
}
#media screen and (max-width: 600px){
.header_socials,
.scroll_down{
display: none;
}
}
There is nothing in my code to show the media screen height at 800px because I dont know how to go about it that is why I am asking here
As you can see above, the image is in a div tag with className = 'me'
This is the image i want to take off entirely from that position when the screen height reduces and and place it at the top of the <h1> Favourite Tech Solutions</h1>
Could you update your problem to be a bit more precise? You do not seem to have #media screen and (max-width: 800px) in your css to even target the div you want to remove. Also, I would use Class here instead of className.
Once you do, you could have the following:
#media screen and (max-width: 800px) {
.header__container {
display:none;
}
}
Related
I want to have the logo as the home button, i have the image as a link on the nav bar, but its very tiny, i want it to fill the height of the nav bar. In css i gave the height as 50 px to the nav class. Is there a way to make any items placed in a container to not be bigger than the boundaries of the container ?
import Link from "next/link"; import navStyles from "../styles/Nav.module.css"; import Image from "next/image";
const Nav = () => { return (
<nav className={navStyles.nav}>
<ul>
<li>
<Link href="/">
<a className={navStyles.a}>
<Image
className={navStyles.logo}
width="40.3px"
height="21.3px"
src="/blue.png"
/>
</a>
</Link>
</li>
</ul>
</nav> ); }; export default Nav;
.nav {
height: 50px;
padding: 10px;
background: #000;
color: #fff;
display: flex;
align-items: center;
justify-content: flex-start;
}
.nav ul {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
.nav ul li a {
margin: 5px 15px;
max-height: 50px;
}
.logo{
height: 50px;
width: 50px;
position: relative;
}
When I set the image height and width to 100%, the image is bigger than the nav bar,
How do I restrict the image to the height of its parent div ?
Add display: block and max-height: 100% to the image element:
.logo{
height: 50px;
width: 50px;
max-height: 100%;
display: block;
position: relative;
}
wrap Image tag with div and make width and height 100% !important
I'm Transferring some design to a web page, but I can't seem to get the background image to show. I've checked various solutions online and they keep telling me to add the 'background-image' property, which I have done. Yet it doesn't work. I've pasted the code below. I apologise if it's a very obvious mistake as I'm not quite familiar with CSS.
Could someone please point out where my mistake is?
import React from "react";
import styled from "styled-components";
// Assets
import HeaderImage from "../../assets/img/covlie_homepage_illustration.png";
export default function Header() {
return (
<Wrapper id="home" className="container flexSpaceCenter">
<LeftSide className="flexCenter">
<div>
<h1 className="extraBold font60">Some Text</h1>
<HeaderP className="font13 semiBold">
Some Text
</HeaderP>
</div>
</LeftSide>
<RightSide>
<ImageWrapper>
<Img className="radius8" src={HeaderImage} alt="office" style={{zIndex: 9}} />
</ImageWrapper>
<GreyDiv className="lightBg"></GreyDiv>
</RightSide>
</Wrapper>
);
}
const Wrapper = styled.section`
padding-top: 80px;
width: 100%;
min-height: 840px;
background-image: transparent url('../../assets/img/page_heade_rbackground_image.png') 0% 0% no-repeat padding-box;
#media (max-width: 960px) {
flex-direction: column;
}
`;
const LeftSide = styled.div`
width: 50%;
height: 100%;
#media (max-width: 960px) {
width: 100%;
order: 2;
margin: 50px 0;
text-align: center;
}
#media (max-width: 560px) {
margin: 80px 0 50px 0;
}
`;
const RightSide = styled.div`
width: 50%;
height: 100%;
#media (max-width: 960px) {
width: 100%;
order: 1;
margin-top: 30px;
}
`;
const HeaderP = styled.div`
max-width: 470px;
padding: 15px 0 50px 0;
line-height: 1.5rem;
#media (max-width: 960px) {
padding: 15px 0 50px 0;
text-align: center;
max-width: 100%;
}
`;
const GreyDiv = styled.div`
width: 30%;
height: 700px;
position: absolute;
top: 0;
right: 0;
z-index: 0;
#media (max-width: 960px) {
display: none;
}
`;
const ImageWrapper = styled.div`
display: flex;
justify-content: flex-end;
position: relative;
z-index: 9;
#media (max-width: 960px) {
width: 100%;
justify-content: center;
}
`;
const Img = styled.img`
#media (max-width: 560px) {
width: 80%;
height: auto;
}
`;
I finally discovered the issue. I'm using styled components, and the implementation for styled components is different. First I should have imported the image
import bgImg from "../../assets/img/page_heade_rbackground_image.png"
Then implemented like this
const Wrapper = styled.section`
padding-top: 80px;
width: 100%;
min-height: 840px;
background-image: url(${bgImg});
#media (max-width: 960px) {
flex-direction: column;
}
`;
Don't know if this will help but the background image is set to transparent.
background-image: transparent url('../
I see that when you figured it out you didn't use transparent :)
I have a div element and I want my image within it to scale to the full width of the parent however for some reason its not taking up the full width. I could use object-fit: cover; but I don't want to crop the image I want it to fill up the space of the parent. Id also like to scale it so it remains a square the whole time so it always scales as an equal square. I am a little confused as to why its not taking up the parents container. It seems to be wanting to keep its aspect ratio but I want it to stretch to the parent container both via its height and width properties.
html:
import React from 'react';
const ThreeGridTeaser = (props) => {
return (
<div className="specific-offer-container mt-0">
<div className="three-grid-teaser-wrapper">
<div className="three-grid-teaser-container">
{props.gridData.map((item, index) => (
<div key={index} className="three-grid-teaser-block">
<div className="three-grid-image-container hidden">
<img src={item.image}
/>
</div>
<div className="product-text-container hidden">
<ul>
<li className="product-title">{item.title}</li>
<li className="product-description">{item.description}</li>
</ul>
</div>
</div>
))}
</div>
</div>
</div>
)
}
export default ThreeGridTeaser;
SASS:
.three-grid-teaser-wrapper {
width: 100%;
height: auto;
display: flex;
justify-content: center;
}
.three-grid-teaser-container {
width: 100%;
justify-content: center;
flex-wrap: wrap;
height: auto;
display: flex;
grid-gap: 20px;
gap: 20px;
#media (max-width: 1199.98px) {
gap: 25px;
}
#media (max-width: 767.98px) {
width: 100%;
}
}
.three-grid-teaser-block {
display: flex;
width: 32%;
height: fit-content;
#media (max-width: 1199.98px) {
width: 48%;
}
#media (max-width: 767.98px) {
width:47%;
}
justify-content: center;
flex-direction: column;
}
.hover-text-underline {
text-decoration: underline;
text-underline-position: under;
}
.three-grid-image-container {
height: 300px;
#media (max-width: 1199.98px) {
height: 350px;
}
#media (max-width: 767.98px) {
height: 180px;
}
width: 100%;
max-width: 100%;
img {
display: block;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
}
}
.product-text-container {
ul {
margin-top: 10px;
padding: 0;
li:last-child {
padding-top: 5px;
}
li {
list-style: none;
}
}
}
.product-title {
font-family: $terminaDemi;
font-size: 12px;
#media (max-width: 767.98px) {
font-size: 8px;
}
}
.product-description {
font-family: $Montserrat;
font-size: 18px;
#media (max-width: 767.98px) {
font-size: 12px;
}
}
This is because the image has reached its maximum height in relation to the div. I mean, an image 300px wide and 400px high inside a 400px square div, in this case if you put a width of 100% in the image, the maximum that it will reach in its width is 300px, in the case of you don't want to resize it.
Demonstração
Update
'object-fit: contain' makes the image fit in the space it has proportionally available, if you want it to maintain its proportion and fill the entire space, use the 'object-fit: cover'
look at this
https://jsfiddle.net/gxnvuq6s/8/
have you tried looking at the background-size: cover; style? you can then also position your image with background-position: center center;
I am building a website and for the landing page, I need to build something like below as a first section.
but it looks like this
and
when resizing
The code is this one :
import React from 'react';
import HomeCurated from '../components/sections/HomeCuratedSection';
import HomeTrend from '../components/sections/HomeTrendSection';
import NearbyYou from '../components/sections/HomeNearbySection';
import VillageBanner from '../assets/images/village-banner-icon.png';
import DiscoverImage from '../assets/images/discover-home.jpg';
import WhiteButton from '../components/materialdesign/WhiteButton';
import TextContents from '../assets/translations/TextContents';
import './Home.css';
class Home extends React.Component {
render() {
return (
<div className="discover-tile">
<div className="background">
<img
src= { DiscoverImage }
className= "background"
alt="Village"
/>
</div>
<div>
<div className="text-tile">
<h1>{TextContents.ThinkOfUs}</h1>
<p>{TextContents.TheWorldIsYours}</p>
<div className="button">
<WhiteButton textSize="14" link_href="/discover" text={TextContents.DiscoverBtn} />
</div>
</div>
<div>
<img
src= { VillageBanner }
className = "banner"
alt="Village"
/>
</div>
</div>
</div>
);
}
}
export default Home;
and css :
.discover-tile {
width: 100%;
height: 657px;
border-radius: 21.5px;
}
.background {
width: 100%;
height: 657px;
border-radius: 21.5px;
}
.text-tile {
width: 370px;
position: absolute;
text-align-last: left;
top: 25%;
bottom: 0;
left: 20%;
right: 0;
}
.text-tile h1 {
position: absolute;
width: 370px;
font-family: Fredoka One;
font-size: 39px;
font-weight: bold;
line-height: 1;
text-align: left;
color: #ffffff;
}
.text-tile p {
position: absolute;
width: 200px;
font-family: Source Sans Pro;
top: 28%;
bottom: 0;
left: 0;
right: 0;
font-size: 22px;
font-weight: normal;
text-align: left;
color: #ffffffff;
}
.banner {
width: 54px;
height: 82px;
position: absolute;
text-align: left;
top: 25%;
bottom: 0;
left: 15%;
right: 0;
}
.button {
position: absolute;
text-align: left;
top: 32%;
}
Any idea how to make sure the style/position of text remain the same when changing the screen or at leat adapt a little ?
I recommend you to add Media query into the end of css file and you should apply position:absolute only on .text-tile' container not it's descendants, because the container .text-tile is on absolute position already, so you just add/change margin/padding property if you want to change space of it's descendants (here is h1 and p). You can take a look on this article for more information about grid table: https://www.w3schools.com/css/css_grid.asp. I don't know if this code work for you or not, you should try this:
.discover-tile {
width: 100%;
height: 657px;
border-radius: 21.5px;
}
.background {
width: 100%;
height: 657px;
border-radius: 21.5px;
}
.text-tile {
width: 370px;
position: absolute;
text-align-last: left;
top: 25%;
bottom: 0;
left: 20%;
right: 0;
}
/* change position:absolute -> position:relative for your desktop version */
.text-tile h1 {
position: relative;
width: 370px;
font-family: Fredoka One;
font-size: 39px;
font-weight: bold;
line-height: 1;
text-align: left;
color: #ffffff;
}
.text-tile p {
position: relative;
width: 200px;
font-family: Source Sans Pro;
/* with relative position property, it's naturally lay next to each other, so now if you just need to add padding/margin to h1 and p for spacing
top: 28%;
bottom: 0;
left: 0;
right: 0; */
font-size: 22px;
font-weight: normal;
text-align: left;
color: #ffffffff;
}
/* tablet, ipad version (change font-size here if needed)*/
#media (min-width: 768px) and (max-width: 1024px){
.text-tile h1 {
font-size: 34px;
}
.text-tile p {
font-size: 22px;
}
}
/* mobile version (change font-size here if needed)*/
#media (max-width: 600px) {
.text-tile, .text-tile h1, .text-tile p{
width: calc(100% - 20%); /* subtract the left:20% of .text-tile in desktop-version and set full width */
}
.text-tile h1 {
font-size: 22px;
}
.text-tile p {
font-size: 18px;
}
}
<div class="discover-tile">
<div class="background">
<img
src= "https://via.placeholder.com/720"
class= "background"
alt="Village"
/>
</div>
<div>
<div class="text-tile">
<h1>Think of us as smart friend that takes you to do cool stuff</h1>
<p>The world is yours</p>
<div class="button">
<button>
Discover
</button>
</div>
</div>
</div>
</div>
There are some changes needed, but the biggest mistake you have done here is using these two css rules together,
width: 100%;
height: 657px;
If you set the with to 100%, it would fit the viewport, but the height is fixed. So, on all smaller screens, the width would get less, but the height would still remain the same. This will not conserve the aspect ratio of the image, and thus the image would be stretched vertically. Which is clear in the question images.
The fix for this, if you want a full width image is too set
width: 100%;
height: auto;
Now, the image height would auto adjust and the image won't be distorted. Once you fix that, the positioning of text is straight forward. Hope it helps!!!
Background
I am trying to make a div where an image is on one end with a text portion on the other (taking up the rest of the available space). The image is sized relative to the window width and the text is center-aligned within the space available.
Also, the image has icons that are absolutely positioned on it, relative to it's size.
You can test it for yourself here
HTML:
<div id="previousVideo" onclick="backVideo();" title="Back">
<div class="videoNameContainer">
<p class="videoName"></p>
</div>
<div class="videoImageContainer">
<div class="videoImageWrapper">
<img class="videoImage" src="" />
<span class="fa fa-backward"></span>
<p class="videoTime"></p>
</div>
</div>
</div>
CSS:
#previousVideo,
#nextVideo {
display: flex;
padding: 5px;
width: 25%;
height: 40%;
cursor: pointer;
}
.videoNameContainer {
width: 100%;
display: flex;
align-items: center;
height: 100%;
justify-content: center;
}
.videoImageContainer {
height: 100%;
display: flex;
width: 40%;
align-items: center;
}
.videoImageWrapper {
width: 100%;
max-height: 100%;
display: flex;
position: relative;
}
.videoName {
margin: 0;
max-height: 100%;
overflow: hidden;
background-color: white;
}
.videoTime {
position: absolute;
bottom: 0;
right: 3px;
color: white;
margin: 0;
font-size: 0.8em;
}
#previousVideo .videoNameContainer {
margin-right: 5px;
}
#previousVideo .videoImageContainer {
margin-left: auto;
}
.fa-backward, .fa-forward {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
Question
Upon resizing the window of Firefox, the image resizes and everything follows the CSS.
Yet, doing the same on Chrome, the image does not resize at all:
Why is this happening? Thanks ahead!
UPDATE:
On adding width:100% to the image, Chrome does not maintain the aspect ratio of the image:
you container is resizing, but the img is overflowing.
You need to add width:100% to your img, so it resizes to whatever width the container has.
.videoImage{
width:100%;
height:100%;
}
It seems in the absense of a width declaration for the image itself, Firefox is resizing the img to the container, while Chrome is just keeping the image actual width.