What is causing the text to not wrap around properly?

I'm currently facing an issue where the text that should not wrap around the image is wrapping, while the text that should be wrapped isn't. This is causing a layout problem in my coding section as shown here: https://i.sstatic.net/2oMn1.png

The desired layout is to have the image on the left side of the coding section, but instead, the 'get in touch' section is appearing there.

Below is the HTML code snippet:

   <!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Angad's website</title>
  <link rel="stylesheet" href="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/css/styles.css">
  <link rel="icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Oswald:wght@200&family=Sacramento&family=Vollkorn:ital,wght@1,600&display=swap" rel="stylesheet">
</head>


<body>
    <!-- Your content goes here -->
</body>

</html>

And here is the CSS code snippet:

    body {
  margin: 0;
  text-align: center;
}

/* Your CSS styles go here */
htmlcss

Answer №1

It's important to ensure that the img tag is placed within the p tag, rather than outside of it.

<p><img src="" />....</p>

Answer №2

If you want to ensure that the image remains on the left side of the code section, you can achieve this by wrapping both the text and image tag in a div. You should also create a container for the image, setting its width and height to 100%, and defining the size for the parent div.

img {
  width: 100%;
  height: 100%;
}

p {
  padding: 1.5em 2em;
}

.side-to-side {
  display: grid;
  /* The paragraph will occupy 2/3 of the space, while the img-container will take up 1/3 */
  grid-template-columns: 1fr 2fr;
  /* Vertically center align the paragraph and img-container */
  place-items: center;
}

.img-container {
  /* You can specify a custom size for the image here */
}
<div class="skill-row">
  <h3 class="skillset"> Coding</h3>
  <div class="side-to-side">
    <div class="img-container">
      <img class="coding" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSWWw7ruZUrx8wiGgmmohOBDMJG3tEgQK3agQ&usqp=CAU" alt="coding icon">
    </div>
    <p>
      Began learning less than a year ago. Proficient in Python. Currently expanding knowledge in JavaScript, jQuery, Node.js, Express.js, SQL, MonoDB, Mongoose, and React.js as part of a Web Development course.
    </p>
  </div>
</div>

Answer №3

Your improvements were almost perfect, I just made a few adjustments. I added text-align: center; to the skillset class and changed the width of the skill-row class from 50% to 100%. Additionally, I inserted display: inline; into your skill-row class.

Furthermore, I modified the coding class as follows:

.coding{
  width:20%;
  position: relative;
}

I trust this refined version is more aligned with what you're looking for!

body {
  margin: 0;
  text-align: center;
}

.top-container {
  padding-top: 100px;
  position: relative;
}

.middle-container {}

.bottom-container {}

.bottom-cloud {
  position: absolute;
}

.top-cloud {
  position: absolute;
  right: 325px;
  top: 50px;
}

h1 {
  font-family: 'Sacramento', cursive;
  font-size: 3.75rem;

  color: #66BFBF;
}

h2 {
  font-family: 'Vollkorn', serif;
  font-size: 2.75rem;
  color: #66BFBF;
}

h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.875rem;
  color: #11999E;
}

p {
  font-family: 'Lato', sans-serif;
  font-size: 1.15rem;
}

.skillset{
  text-decoration: underline;
  text-align: center;

}

.footer-link {
  color: #11999E;
}

.btn{
  color: #11999E;
}

.short-desc{
  font-weight: lighter;

}

.skill-row{
  width: 100%;
  margin: 100px auto;
  text-align: left;
  line-height: 2;
  display: inline;

}

.basketball{
  width: 50%;



}


.guitar{
  width:50%;

}

.bringup {
  margin-top: -35px;
}
.coding{
  width:20%;
  position: relative;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Angad's website</title>
  <link rel="stylesheet" href="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/css/styles.css">
  <link rel="icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Oswald:wght@200&family=Sacramento&family=Vollkorn:ital,wght@1,600&display=swap" rel="stylesheet">
</head>


<body>
  <div class="top-container">
    <img class="top-cloud" src="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/images/cloud.png" alt="cloud-image">
    <h1> I'm Angad,</h1>
    <h2 class="short-desc"> Your favourite and funniest website developer.</h2>
    <img class="bottom-cloud" src="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/images/cloud.png" alt="cloud-image">
    <img class="mountain" src="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/images/mountain.png" alt="mountain-image">

  </div>

  <div class="middle-container">
    <div class="profile">
      <img src="/Users/angadsinghbedi/Desktop/Web_Development/HTML - personal site(1)/circle-cropped.png" alt="Angad's Profile Picutre" height="400px" width=400px">
      <h3>Hey there!! <br> Here's a bit about me.</h3>
      <p>I am a school student trying to study.<br> I suppose you already know my name, that is how you got here(or i sent you the link for this website). Anyway, I am studing in grade 12 in Mayo College, an all boys boarding school in
        Ajmer,Rajasthan. Don't bother asking, i'll answer it, YES! Life is better at school. <br> I want to become a full stack website developer and a cyber security expert. <strong> I like music. I love sleep. </p>

    </div>
    <hr>
    <div class="skills">
      <!-- <h2>My Skills</h2>
      <div class="skill-row">
        <h3 class="skillset"> Playing the guitar</h3>
        <p>I recently decided to take my guitar out of the cupboard after years. Now I am in love with it.</p>
        <img class="guitar" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTu7Y_9NMtc8RFWs2Oj1vozuxvj87lFMH9P5w&usqp=CAU" alt="Guitar-image">
      </div>

      <div class="skill-row">
        <h3 class="skillset">Playing Basketball</h3>
        <p>I've been playing basketball for almost 5 years now. Are you up for a one versus one match?</p>
        <img class="basketball" src="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/images/angad-basketball.png" alt="Angad Playing Basketball">
      </div> -->
      <div class="skill-row">
      <div class="inline">
      <img class="coding" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSWWw7ruZUrx8wiGgmmohOBDMJG3tEgQK3agQ&usqp=CAU" alt="coding icon">
      <div class="bringup">
          <h3 class="skillset"> Coding</h3>
          <p>Started less than a year ago. I have experience in Python. Learning Javascript, jQuery, Node.js, Express.js, SQL, MonoDB, Mongoose and React.js together as a course for Web Development</p>
          </div>
      </div>
      </div>


    </div>
    <hr>
    <div class="contact-me">
      <h2>Get In Touch</h2>
      <h3> Let's see who can score 11 points the fastet in  a 1 V 1 and then we can get down to business. Fun first,right?</h3>
      <p>You can either click the email button to send an email or connect with me through instagram. </p>
      <a class="btn" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff9e91989e9b8c9dcbcfc9c6bf9a929e9693d19c9092">[email protected]</a>">EMAIL</a>
    </div>
  </div>


  <div class="bottom-container">
    <a class="footer-link" href="https://www.instagram.com/angadsinghbedi_/">Instagram</a>
    <!-- <a class="footer-link" href="https://twitter.com/">Twitter</a>-->
    <!-- Enter linkedin here -->

    <p>© 2021 Angad Singh Bedi.</p>
  </div>


</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide to accessing and managing events for the child inside a div element using extjs4

How can I dynamically switch between the divs with classes "icon-right" and "icon-left" when clicked? Here is an example of the HTML and ExtJS code involved: Html code: <div class="msg"> <div> <div cla ...

javascriptjquerycsshtmlextjs

Click on a button to send the React Router path as a parameter in

I've got a React form with a submission button like this: <Link className="btn btn-secondary btn-width-200 search-submit" to={{pathname: '/booking/search', query: this.state.filters}}> Search </Link> Within the ...

javascripthtmlreactjsurl-routing

Ways to make text within a container smoothly slide down

Hello, I have a question about jQuery as I am relatively new to it. I am currently working on creating a team members section where clicking on a team member will slide down information about that person underneath. I have managed to set up the parent co ...

jquerycss

When the fullscreen modal is opened, the initial image displayed is not the same as the one that was clicked on

Seeking assistance: I've been struggling with a problem for quite some time now and could really use some help from you guys. My issue involves an 'AngularJS' webapp that retrieves posts from an 'FB page' via 'OpenGraph' ...

javascriptcssangularjshtmlionic-framework

Utilizing CSS Grid to dynamically stretch and wrap rows based on adjacent siblings within a flat DOM structure

Looking for a way to create a grid layout that adjusts row sizes based on adjacent siblings. Interested in SCSS or CSS solutions using grid, flexbox, or other techniques. https://i.sstatic.net/Ump5U.png I am working with a dynamically generated list base ...

csssassflexboxcss-grid

Assigning information to a button within a cell from a dynamically generated row in a table

I've been diligently searching through numerous code samples but have yet to find a solution to my current dilemma: My HTML table is dynamically generated based on mustache values and follows this structure: <tbody> {{#Resul ...

javascriptjqueryhtmlajaxbootstrap-4

Delete the designated column from the table

I am having difficulty with hiding and showing table columns using checkboxes. I need to eliminate the Mars column (in bold) along with its corresponding data (also in bold). Once the Mars column is removed, I want the Venus column and its data values to ...

javascriptcss

Having trouble with changing the class using Jquery click function

Originally, I had the code in an ASP.Net project, but to troubleshoot, I moved it to a separate web server. However, I am still unable to switch between the tab panes with the buttons. Any assistance in debugging this issue would be greatly appreciated. S ...

jqueryhtml

Kohana ajax causing removal of JQuery Data attributes

Currently, I am developing an application where jquery data is used to pass variables to HTML elements. It has been successful in one part of the site when the data attributes are added to a tr tag. The following code works: <tr class="js-instructions ...

javascriptjqueryhtmlajaxkohana

Looking to transform a nested JSON structure into a visually appealing HTML table with merged rows?

My JSON structure appears as follows: $scope.data = [ { "type":"Internal", "count": 3, "library" : [ { "type":"Library 123", "count": 2, "version" ...

javascripthtmlarraysangularjsjson

Troubleshooting Angular 2 with TypeScript: Issue with view not refreshing after variable is updated in response handler

I encountered a problem in my Angular 2 project using TypeScript that I could use some help with. I am making a request to an API and receiving a token successfully. In my response handler, I am checking for errors and displaying them to the user. Oddly en ...

javascripthtmlangulartypescript

Library with integrated Jquery functionalities

Hello again with another query. I recently came across a jQuery code that allows you to click on an entire table row (tr) to show/hide other rows (specified as .none). I managed to find the code and it works perfectly on JSFiddle. However, when I try to im ...

jquerycss

My website experiencing issues due to Firefox 23.0.1 altering the CSS and causing disruptions

After setting up a test site for a client to review as part of a proof of concept, I noticed an unexpected white line while checking across different browsers. (loading correctly in all browsers except FF) In Firefox, there appears to be a thin ~10px li ...

htmlcssfirefoxbackground-color

Trying to showcase information received from a server using an API

For a school project, I am developing a website that can retrieve weather data (currently just temperature) based on a city or zip code from openweathermap.org using an asynchronous call. I have successfully retrieved the data from the API, but I am strug ...

javascripthtmlajax

CSS-enhanced automatic scrolling

On my WordPress website, there is a project slider that consists of images with text. Currently, the slider does not auto-scroll and requires manual navigation using buttons. If I want to eliminate the need for buttons and make the slider scroll automatic ...

cssanimationscroll

utilizing the value within the useState function, however, when attempting to utilize it within this.state, the tab switching feature fails

I am struggling to implement tab functionality in a class component. Even though I'm using this.state instead of useState, the tab switching is not working correctly. I have read the following articles but still can't figure it out: http ...

javascripthtmlcssreactjsredux

Show the "Splash" picture, then switch to a newly uploaded image and show it for a set amount of time

I am in the process of developing an HTML/JavaScript page that will showcase a splash image (splash.jpg) until it gets replaced by another image file called latest.jpg. Once this latest.jpg is displayed, I want it to remain on the screen for 90 seconds bef ...

javascripthtml

Use the angular cli to incorporate the CSS styles found in the node_modules directory

After successfully installing a new library with npm, I now face the challenge of importing the CSS into my project. It seems unwise to directly link to the node_modules folder. Can anyone suggest an easy way to import this CSS into my Angular CLI project? ...

cssangularjsnode.jsvendorangular-cli

Obtained a ZIP file via CodeSandbox that contains a Vue.JS webpage. However, the index.html file yielded an

I have created my first ever Vue.JS / Vue2Leaflet app. It runs perfectly fine on codesandbox.io. However, when I download the ZIP file and try to open the index.html file, it appears blank. Is there something specific that needs to be done to make it work, ...

htmlvue.jsleaflet

Avoid creating a line break directly after the header, however allow for a line break

I find myself in a scenario where I require a paragraph that has a specific format: An Emphasized Title Some relevant information regarding the subject... I am looking to insert a new line before the title, ensuring it seamlessly integrates with the re ...

htmlcssheaderjekyll