We Keep Coding

How can I create these images/col?

I'm new, and I want to learn how can I create these images to be in the center of the page and I want to be a very small gap between them? May you please help me? I was searching on the internet about how can I create this, but unfortunately I wasn't very lucky. What's the code for this container, row, or column?
Image

Is this what you want? You wrap the two images inside a div container and apply flex property to it. Then use a padding of 5px on each image to get that little space between. Also I have used a custom height to the container, you can adjust it according to your need.
.container {
display: flex;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
}
.container > div {
padding: 0px 5px;
max-width: 90%;
height: 325px;
}
.container div img {
width: 100%;
height: 100%;
object-fit: cover;
}
#media screen and (max-width: 780px) {
.container {
flex-direction: column;
}
.container > div {
padding: 10px 5px;
}
}
<div class="container">
<div><img src="https://i.picsum.photos/id/1/5616/3744.jpg?hmac=kKHwwU8s46oNettHKwJ24qOlIAsWN9d2TtsXDoCWWsQ"/></div>
<div><img src="https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68"/></div>
</div>

media query screen height not functioning for image

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;
}
}

My Wrapper Background Image does not show

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 :)

Responsively change div size while aligning with another div

For the last couple days I've been trying to get my CSS to work, but whenever I fix one thing I seem to break another. I have this codepen with a main div containing chat_bubble and character_image.
https://codepen.io/TheNomadicAspie/pen/JjWVbKJ
Here's what I'm trying to do:
chat_bubble should fill 70% of the vertical and horizontal space within main.
When screen width is over 700px:
character_image should be to the right of chat_bubble, bottom-left aligned.
character_image should not be cropped or extend off the screen.
character_image should scale maintaining aspect ratio filling up to 100% of the height of chat_bubble without extending past it or shrinking the size of chat_bubble.
When screen width is under 700px:
character_image should change to another image (I tried to use background-image to do this but couldn't get it to show, I'm thinking of using multiple image tags in the html and hiding/showing them individually).
character_image should be below chat_bubble, upper-right aligned.
character_image should take up 30% of the vertical height within main.
chat_bubble should take up the remaining vertical space, and 100% of the horizontal space within main.
I know I need to use media queries to do it, but I am struggling to think about the logic and what options each div container needs. Right now character_image is a fixed size and creates a scroll bar when the screen isn't large enough. And when I do fix one of the above requirements, I always cause something else to break.
Here's my CSS so far:
*, *::before, *::after {
box-sizing: border-box;
font-family: 'Benne', serif;
font-size: 10vh;
font-size: 16px;
color: black;
line-height: 1.25;
}
:root {
--hue-neutral: 200;
}
body {
padding: 0;
margin: 0;
display: flex;
width: 100vw;
min-height: 100vh;
justify-content: center;
align-items: center;
background-color: black;
}
#question {
font-size: 16px; /* fallback */
font-size: clamp(1em, 5vw, 10vh);
}
.container {
width: 90%;
height: 90%;
border-radius: 5px;
padding: 10px;
position: relative;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 10px;
margin: 20px 0;
height: 20%;
}
.btn {
background-color: purple;
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
font-family: 'Fjalla One', sans-serif;
font-size: 5vh;
}
.btn:hover {
border-color: black;
}
.start-btn, .next-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
#main {
width: 90%;
height: 90%;
overflow: hidden;
}
#chat_bubble {
width: 70%;
height: 70%;
background: ghostwhite !important;
float: left;
}
#character_image {
max-height: 100%;
object-fit: cover;
background: #ffffff;
float: right;
overflow: hidden;
}
#question-text {
height:50%;
}

Add a second <img> tag inside character image, give one id="char_1", and the other id="char_2" and try this css:
#main {
display: flex; /* Use flexbox */
flex-direction: row; /* Flex horizontally */
align-items: flex-end;
}
#chat_bubble {
width: 70vw; /* Make chat bubble 70% of viewport width */
height: 70vh; /* Make chat bubble 70% of viewport height */
}
#character_image {
float: none; /* undo float */
flex-shrink: 1; /* let character image shrink */
height: 70vh; /* Make character_image 70% of viewport height */
}
#character_image img {
height: 100%;
}
#char_1 {
display: inline-block;
}
#char_2 {
display: none;
}
#media(max-width:700px) {
#main {
flex-direction: column;
}
#chat_bubble {
width: 100vw;
}
#character_image {
height: 30vh;
}
#char_1 {
display: none;
}
#char_2 {
display: inline-block;
}
}

how to make a website go to full width and height in asp.net

I am trying to understand how to make a web page which will go in full height and width in asp.net. I know to use width: 100% for the background but I am not understanding how to change the width and height of other buttons, , and other stuff..
I search on google and youtube for that but I am not getting a good tutorial to explain how I should make it.
Should I use jquery or javascript? I'm trying to stay far from those at the moment.
Can any one please give me a simple explanation about this?

Best way to control ui styles, should be CSS.
For example, setting a element to full width and height
.full_width {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
}
.element_inside {
width: 100px;
border: 1px solid red;
}
.button_inside {
width: 125px;
height: 60px;
line-height: 60px;
}
<div class="full_width">
I am full width element
<div class="element_inside">
Low width
</div>
<button class="button_inside">
Button
</button>
<button style="width: 100%;">
Button full width
</button>
</div>
But it uses absolute position.
You could use something like this too.
html {
display: table;
width: 100%;
min-height: 100%;
}
body {
display: table-row;
}
.full_width {
width: 250px;
display: table-cell;
vertical-align: top;
min-height: 100%;
}
.full_width {
border: 1px solid #f00;
}
<div class="full_width">
full width container
</div>
For responsive layout, and different screen different size, you can use following codes:
#media (min-width: 768px) {
.container {
width: 740px;
}
}
#media (min-width: 992px) {
.container {
width: 960px;
}
}
#media (min-width: 1200px) {
.container {
width: 1160px;
}
}
#media (min-width: SCREEN_WIDTH_IN_PIXELS) {
.container { // my element width for this screen
width: 1160px;
}
}

Use different css container class for buttons. For ex;
.body{
width: 100%
}
button {
color: #666;
border-color: #EBEBEB;
background-color: #EBEBEB;
text-align: center;
height:200px;
width:200px;
}
And then use for button,
<button class="button">Button</button>