Images in a separate css class will cause other images to move as well

I'm currently facing an issue in my React project where adding padding to some images at the bottom of the page in a separate CSS class is causing the main image at the top of the page to move.

Main Image


        <div className="self--image">
            <img src={Me} alt="Me"/>
        </div>

Additional Images



        <div className="bottom--cont">
            <a href="https://github.com/mm2023git">
                <img src={github} alt="Github"/>
            </a>
            <a href="https://www.instagram.com/mokelmoo/">
                <img src={insta} alt = "Instagram"/>
            </a>
        </div>

CSS

.self--image > img{
  width: 317px;
}

.bottom--cont{
  background-color: #161619;
  position: relative;
  top: -47px;
}

.bottom--cont > a, img{
  width: 25px;
  display: inline-block;
  position: relative;
  padding-left: 20px;
}

Is there a way to prevent the padding and positioning on the additional images from affecting the main image?

htmlcssreactjs

Answer №1

Essentially, the mistake occurred in the code snippet .bottom--cont > a, img. This sentence instructs to apply styles to the .bottom--cont class first and then to all img tags. In reality, the selectors should be separated like this

.bottom--cont > img, .bottom--cont > a


.self--image > img {
  width: 317px;
}

.bottom--cont {
  background-color: #161619;
  position: relative;
  top: -47px;
}

.bottom--cont > img, .bottom--cont > a {
  width: 25px;
  display: inline-block;
  position: relative;
  padding-left: 60px;
}
<div class="self--image">
  <img src="https://picsum.photos/id/3/400/400" alt="Me" />
</div>

<div class="bottom--cont">
  <a href="https://github.com/mm2023git">
    <img src="https://picsum.photos/id/1/50/50" alt="Github" />
  </a>
  <a href="https://www.instagram.com/mokelmoo/">
    <img src="https://picsum.photos/id/1/50/50" alt="Instagram" />
  </a>
</div>

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

Creating an unordered list of API movies in React, Axios, and MovieDB with a specified quantity of x

I am developing a movie search application using React, Axios, and the MovieDB API. The app currently retrieves all the desired information when searching for a movie. However, I encountered an issue where movies that share a title with more popular ones d ...

reactjsapi

Avoiding flickering when the browser back button is clickedAvoiding the flickering effect

As I work on developing an Asp.Net application, a challenge has arisen. In order to prevent users from navigating back to the login page after logging in, I have implemented JavaScript code successfully. However, when clicking the browser's back butto ...

asp.netjavascripthtmlbrowser

Exploring the functionality of the PageIndicator for Wearable Technology

Exploring the Page Indicator within a Tizen Wearable Application for Gear S3 Frontier has been an interesting journey. Despite successful implementation with text content, adding controls to each section or incorporating background images has proven challe ...

htmlcssswipetizentizen-web-app

Is there a way to align two links side by side, with one on the left and the other on the right?

<a href="example"><p style="text-align:left">Previous Page</a> <a href="example"><p style="text-align:right">Next Page</a> I am trying to figure out how to align these links on the same line. Any suggestions would be a ...

htmltexthref

Error encountered: Unexpected character 'C' found at the beginning of the JSON data received during the Ajax callback

When checking the network debugger in the PHP file, it displays {message: "Success", data: {Name: "admin"}}. However, there seems to be an issue with the AJAX callback. Can someone help me troubleshoot this problem that has been bothering me for a while? T ...

phphtmljsonajax

Ways to display an icon upon hovering or clicking, then conceal it when the mouse is moved away or another list item is clicked using ngFor in Angular 7

Within a simple loop, I have created a list with multiple rows. When a row is clicked or hovered over, it becomes active. Subsequently, clicking on another row will deactivate the previous one and activate the new one. So far, everything is functioning c ...

htmlcssangular

Issue with Bootstrap dropdown-menu alignment when image_tag contains the "center-block" class

<ul class="logo"> <li class="navtabs dropdown"> <a class="dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <%= image_tag('Thumbnailimagestufffurr ...

htmlcssruby-on-railstwitter-bootstrap

Keywords: <footer>, <aside> not encompassing all aspects of the HTML on the content page

Recently, I have been transitioning my codebase from .NET webform to .NET Core: In the _Layout.cshtml, elements like <hr> and <section> span the entire width (e.g. 100%) of the html page as expected. However, when I insert similar tags in the ...

html.netasp.net-coretags

Is it possible to generate an HTML element by utilizing an array of coordinates?

I have a set of 4 x/y coordinates that looks like this: [{x: 10, y: 5}, {x:10, y:15}, {x:20, y:10}, {x:20, y:20}] Is there a way to create an HTML element where each corner matches one of the coordinates in the array? I am aware that this can be done usi ...

javascripthtmlcss

What is the quickest way to change an HTML element as soon as it finishes loading?

Is there a way to modify an element as soon as it is created, without relying on the $(document).ready() function which can be inefficient when a page fails to load completely or loads slowly? Some delay is acceptable, but not if it takes multiple seconds ...

javascriptjqueryhtmlfirefoxgreasemonkey

Enabling the acceptance of blank values within an HTML5 date input field

When using an HTML5 date input for a field that corresponds to a nullable datetime column in the database, how can one avoid setting an empty value in the input field? In my AngularJS application, the ng-model is connected to a scope variable with an init ...

javascriptangularjshtmldate

Echo a JS variable into PHP and then insert a PHP file into an HTML element - a step-by-step guide!

Greetings to the wonderful community at stackoverflow, I am currently working on a variable code that allows for easy insertion of code from another file, such as a div. I am curious if it is possible to include a PHP file using JavaScript and JS variable ...

javascriptphphtmlvariables

Adjusting height in Google Maps to fill the remaining space

Currently, I am developing a map application where I want the Google Maps DIV to occupy the remaining height under the header. Here is the code snippet: <!DOCTYPE html> <head> <title>Map Application</title> <style type ...

javascripthtmlcssgoogle-mapsgoogle-maps-api-3

Is there a way to reset useQuery cache from a different component?

I am facing an issue with my parent component attempting to invalidate the query cache of a child component: const Child = () => { const { data } = useQuery('queryKey', () => fetch('something')) return <Text>{data}& ...

javascriptreactjstypescriptreact-native

blur event triggered on a cell within a table

Currently, I am using the code snippet below to populate data using a data table. My goal is to be able to edit the data in one of the columns and then validate the value after editing using the onblur event. I attempted to call the onblur event on the t ...

javascriptjqueryhtml

Using React.js CSSTransition Component properties with TransitionGroup

Exploring ways to animate a group of divs has led me to discover this example which perfectly fits my needs. However, as I am still new to React, I'm having trouble understanding how the props are passed through the <Fade> component, specificall ...

javascriptreactjscss-transitionsreact-transition-group

Scrolling to a specific position on a page when a Vue 3 component appears is a must-do for

When I click a button, my basic form component appears without using the router. I would like the scroll position of the form to automatically move down slightly (for example, on the y-axis at 40) once it is displayed. However, I am unsure of how to achi ...

javascripthtmlvue.jsvuejs3

Having difficulty implementing a hover event on a sibling element of a target using either the duration parameter in jQuery UI or CSS

My objective is to alter the background color of an element and one of its higher siblings in the DOM but within the same parent upon hover. While I successfully used CSS transition to change the first element, I encountered difficulty getting the sibling ...

javascriptjqueryhtmlcss

How to pass the rendered object from one ReactJS component to another as an attribute?

Struggling with a React 16.2.0 issue here and hoping for some guidance. I'm new to React, so could use a sanity check. I'm working on a log viewer app that fetches log entries from a backend database. My goal is to create a Paging component that ...

reactjs

Excessive white space at the bottom of a floated image within a small parent element

I need help with styling a page that will only be viewed on mobile Safari. The HTML markup is as follows: <blockquote> <p><img src="..."/> A paragraph...</p> <p>...</p> ... </blockquote> Here is the CSS u ...

javascripthtmlcssiossafari