Having image and test side by side

HTML & CSS
,
1

Hi there,
I’m currently learning react on scrimba and I’m currently trying to complete the section 2 project which is a travel journal, see the pic below

myfile1-2
myfile1-2552×597 111 KB

How can I get the image and pictures side by side? see my attempt below .

myfile1
myfile11863×927 68 KB

Here is my css and javascript code

body{
    margin:0;
}


.nav-logo{
    width:24px;
    height: 24px;
}

nav{
    height:70px;
    align-items: center;
    display: flex;
    padding: 10px 650px;
    background-color: #F55A5A;
}

.heading-text{
    padding:10px;
    color:white;
    font-size:20px;
    font-family: "Arial Rounded MT Bold";
}

.picture-cards{
    align-items: center;
    display:flex;
}

.destination-pictures{
    width:125px;
    height: 168px;
    padding-top: 100px;
    padding-bottom: 20px;
    padding-left: 700px;


}


import React from "react"

export default function Places(props){
    return(
        <div className="picture-cards">
            <img src={props.item.imageUrl} alt="" className="destination-pictures"/>
            <p><span className="destination-pictures">{props.item.title}</span></p>


        <div>
            <hr/>
        </div>


        </div>
    )

}

import React from "react";
import Navbar from "./components/Navbar"
import Places from "./components/Places";
import data from "./data"

export default function App(){

    const places = data.map(item =>{
        return(
            <Places
            key={item.id}
            item={item}
            />
        )
    })

    return(
        <div>
            <Navbar/>
            {places}
        </div>
    )
}

import React from "react";
import Styles from "./Styles.css"
import logo from "../images/Navbar-logo.png"
export default function Navbar(){
    return(
        <nav>
            <img src={logo} className="nav-logo"/>
            <h4 className="heading-text">My Travel Journal.</h4>
        </nav>
    )
}

any help appreciated as its wrecking my head why anything I try make no difference.

2

Please post the generated html (from view source) otherwise we have to build the html before we can start to help. :slight_smile:

I can tell you that your use of large value padding is the major culprit and you would never use padding in that way. Padding values of 650px and 700ox are nonsense and magic numbers that will not work in a real layout. If that was an attempt to center something then you would instead be looking at auto margins or alignment through the flex properties.

If you post the generated html you are using I will offer a better answer:)

3 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Is this what you need? thanks for replying .

4

That’s not really what I wanted but never mind I’ll put the onus on you to build backwards.

Here is the html and css to create what you wanted so you will need to turn it back into react. :slight_smile:

I would suggest that you always build the page in pure html and css to start with and then once you have it as you want you can convert it into whatever language you choose. Remember the browser only works with html, css and js and knows nothing about the back end code.

5

Really appreciate your help thanks mate.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.