Creating a single line layout for icons and text using inline-grid

My goal is to design a contact field where the icon and text are on the same line. Here is how it currently appears:

https://i.sstatic.net/y7OtB.png

.code-block {
  display: inline-grid;
  background-color: #232323;
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 7px;
}

.code-block code {
  color: #008a00;
}

.code-block .icons {
  display: inline-block;
  vertical-align: top;
  width: 14px;
  height: 14px
}
<div class="code-block">
  <code>Discord: ...#6177</code>
  <img class="icons" src="https://via.placeholder.com/40" alt="Discord" width="10" height="10">
</div>

How can I adjust it so that everything fits in one line?

htmlcssvue.js

Answer №1

To achieve the desired outcome, you should make adjustments to your scss by applying the following styling rules to the .code-block:

grid-template-columns: max-content max-content;
align-items: center;
grid-gap: 4px;

This will ensure that all the necessary styles are applied correctly:

.code-block {
  display: inline-grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  grid-gap: 4px;
  background-color: #232323;
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 7px;
}

.code-block code {
  color: #008a00;
}

.code-block .icons {
  display: inline-block;
  vertical-align: top;
  width: 14px;
  height: 14px
}
<div class="code-block">
  <code>Discord: ...#6177</code>
  <img class="icons" src="https://via.placeholder.com/40" alt="Discord" width="10" height="10">
</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

Applying CSS shadow effects to background images of child elements

The parent header element has a nice inset shadow applied to it. -webkit-box-shadow:inset 0px 0px 50px 10px #e5e5e55; box-shadow:inset 0px 0px 50px 10px #e5e5e5; However, when it comes to the child element "Logo" with a JPG background image, things get ...

htmlcss

Creating a Dynamic Navigation Bar with CSS and JavaScript

I have encountered an issue with my responsive menubar where the dropdown button does not have any style when clicked. function myFunction(){ var x = document.getElementById("myMenubar"); if (x.className === "menubar"){ x.className += "responsiv ...

javascripthtmlcss

The login form is unable to produce any post data upon submission

My login form is contained within a Bootstrap modal component. After filling out the input fields and clicking submit, the modal closes without any action. When inspecting the element under the networks tab, no post request is visible. <div class="mod ...

javascriptjqueryhtmltwitter-bootstrappassport.js

css - div misplaced on Firefox

I'm currently creating a card using CSS animations. Everything is working perfectly on Chrome and Safari, but on Firefox one of the divs seems to be misaligned. Check out this fiddle on both Chrome/Safari and Firefox to see the issue. Any suggestions ...

firefoxcsscss-transforms

The value in Vue being watched from the parent is displayed in reverse order

Recently, I created a custom component that enables users to input text and then sends it to the backend for processing. The processed text is then returned with HTML formatting. However, I encountered an issue where all the text entered into the textarea ...

vue.jsvuejs2

`Discover the latest version of Tailwind using JavaScript or PHP`

My setup includes Laravel v8.81.0 (PHP v8.1.2), Vue v3.2.30, and Tailwind https://i.sstatic.net/fVbJB.png I am looking to fetch the Tailwind version in JavaScript similar to how I can get the Vue version using: //app.js require('./bootstrap'); ...

javascriptlaravelvue.jstailwind-css

Getting rid of website end values in the phrase ""." and "。""

I am in the process of creating a JavaScript regex that will identify string values without any special characters that may interfere with URLs. While I have successfully matched the . character, I have learned that the 。 character can also act as a ful ...

javascripthtmlurlunicode

What could be causing my array to be undefined upon the creation of a Vue component?

I'm struggling to comprehend why my array is showing as undefined in my Vue component. The issue arises in the following scenario: The SelectCategories.vue component uses the router to navigate to the Quiz.vue component. Here, I utilize props to tran ...

javascriptvue.jsvue-component

Trouble getting CSS to load in Webpack

I'm having some trouble setting up Webpack for the first time and I think I might be overlooking something. My goal is to use Webpack's ExtractTextPlugin to generate a CSS file in the "dist" folder, but it seems that Webpack isn't recognizi ...

javascriptcsswebpackpostcss

Discovering Characters in String using jQuery and Implementing a Personalized Class

Update: To achieve the desired typography, I will need to implement some creative jquery / css techniques. The first step is to create a class called .underlined which will allow me to have complete control over the underline by setting a background imag ...

jquerycssregexstring

Is there a way to convert a button into clickable text that performs the same function as the original button?

Seeking a solution to transform a button into clickable text with the same functionality. Explored resources like Google, StackOverFlow, and Youtube for answers. This is the current code snippet representing the button: <button onclick="mainApp.l ...

javascripthtmlcss

Loading texts with the same color code via ajax will reveal there are differences among them

I am currently designing a webshop with green as the primary color scheme. Everything is functioning perfectly, but I have noticed that the text within an ajax loaded div appears brighter than it should be. The text that loads traditionally is noticeably d ...

javascriptjqueryhtmlcss

Harness the power of AngularJS with intelligent insight for effortlessly configuring directive values in HTML5 within the WebStorm environment

Just wanted to ask a quick question as I am new to working with AngularJS and HTML5. I recently created a directive to check if a user has permission for a specific action. Permissions are stored as an array of strings, and based on whether the user has p ...

htmlangularjswebstormdirective

I wish for the form to automatically shut down whenever I click on the (X) icon

I included a close button in my form, but it doesn't seem to be working. Do I need to use JavaScript for this? <button type="button" class="close" data-dismiss="form" aria-label="Close"><span aria-hidden="true">&times;</span>& ...

html

There seems to be an issue with the functionality of CRenderFunction within the coreui-free-vue-admin-template

I am currently utilizing the coreui-free-vue-admin-template for a project. Take a look at this https://i.sstatic.net/UcK7s.png The image above shows a screenshot of _nav.js. The first item's icon is displaying correctly, however, the icons for the ot ...

javascriptvue.jsvue-componentcore-ui

What is the reason for the Pinia Persistedstate Plugin breaking when the statement "useUserStore(store)" is called in a Quasar boot file?

Currently, I am attempting to integrate the Pinia Persisted State Plugin with Pinia in my Quasar application (Vue 3 / TypeScript). Initially, everything functions correctly right out of the box. However, the persisted state ceases to operate when incorpo ...

vue.jsvuejs3quasar-frameworkpinia

Tips for handling the EventHandlers of v-network-graph within a Vue.js instance

Welcome to my first question posted on stackoverflow! I'm a beginner in Vue.js and I'm currently working on displaying and interacting with a node network graph using the v-network-graph component. I'm having trouble understanding how to us ...

vue.jsevent-handlinggraph-visualization

Creating an Interactive Image Gallery with PHP

I need help merging my gallery template with my PHP code to display images fetched from a database. The gallery code is provided below: <body> <section class="gallery-block cards-gallery"> <div class="container&qu ...

phphtmlmysqlmysqlibootstrap-4

The tale of a div's mysterious empty room

Once upon a time, in the world of HTML and CSS, there existed a lonely div. This lonely div longed for companionship, and one day, an inline img came to visit. They formed a bond and became good friends. But, no matter how hard the img tried, it couldn&apo ...

htmlcss

What could be the reason for the HTML canvas not displaying anything after a new element is added?

How come the HTML canvas stops showing anything after adding a new element? Here is my HTML canvas, which works perfectly fine until I add a new element to the DOM: <canvas class="id-canvas", width="1025", height="600"> ...

javascripthtmldomcanvas