CSS help in React

Hey there, I’m working on my first ever made-from-scratch React website. I’m sure I’m going to make a ton of mistakes, but right now I am just trying to get things to behave. I have successfully made one react website previously via tutorial so this is my first time going alone :wink: And I’m having a bit of a struggle.

Here is the website (allow me to celebrate successfully deploying a react website for the second time)
http://wytheria.com/JessicaJoy/groom/

I’m struggling with 2 minor issues in styling.
The first one is the top right navigation. I’m trying to get it to overlap the edge of the page so there isn’t that white gap. Any thoughts? :slight_smile:

The second is my second component consists of 2 divs contained within one div that is set to a flex display. I am trying REALLY hard to get them to take up 2/3 and 1/3. I was trying to do width: 66% and width: 34% but I can’t get the width to work in any way shape or form! If I do width: 500vw it almost gets it to half the screen.

I feel like this should be newbie stuff but it doesn’t seem to be responding how I would expect it to. Any thoughts? Help please! I am struggling lol

on your navigation you can use position absolute. on the second problem can you post your code here?

1 Like

Yep, can use absolute positioning, although if you page become ‘taller’ than the screen height, it will go out of view. I don’t know if that is going to be an issues (or if your page height will be > 100vh). If so you can use position sticky. But that doesn’t answer your question. You should be able to use negative margins. To make the element bigger that it’s container.
For your second question, have you tried using Flex? Oh sorry, I miss-read, you are using flex. Hmm, not sure. I have no idea why 500vw would only take up half of the screen…

2 Likes

Thank you so much :slight_smile: I’ll try the absolute positioning now. Here is the code from the home page. Sorry if it’s a disaster :wink: This is literally my very first attempt at react.

import React from 'react';
import HomeDoodle from './images/home-doodle.jpg';
import './Home.css';

const Home = () => {
	return (
		<div id="homeContainer">
			<div id="introContent">
				Test
			</div>
			<div id="doodleImage">
				<img src={HomeDoodle} />
			</div>
		</div>
		);
}

export default Home;
html, body, #root, .App {
	width: 100%;
}

#homeContainer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
}

#introContent {
	width: 50%;
}

#doodleImage {
	width: 50%;
}

I wonder if it has anything to do with the size of the image. That is, the image could be greater than 50% of the #homeContainer and so is pushing the #doodleImage container to be greater than your defined width (of 50%). You could easily check this by commenting the whole image tag and setting the background colour of either your div’s to different colours (e.g. red and green).

1 Like

http://wytheria.com/JessicaJoy/groom/

And it’s working!! Thank you so much! :smiley: I have been fighting with this for hours lol Huge appreciation. This is going to be quite the learning journey :slight_smile:

2 Likes