What is the best way to create a layout with two columns containing SVGs and text, ensuring that the text consistently appears to the right of the SVG

My webpage has two columns, each containing an SVG and some text. However, when I resize the window in Google Chrome, the text drops below the SVG before the window width goes below 600px. How can I prevent this from happening while maintaining a constant margin between both columns and the sides of the browser?

HTML:

<div class="containerx">
    <div class="rowx">
        <div class="colx">
            <svg class="boxicon" version="1.1" viewBox="0.0 0.0 616.4015748031496 615.514435695538" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
            <h2 class="textthing">Fast Shipping</h2>
        </div>
        <div class="colx">
            <svg class="boxicon" version="1.1" viewBox="0.0 0.0 616.4015748031496 615.514435695538" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
            <h2 class="textthing">Fast Shipping</h2>
        </div>
    </div>
</div>

CSS:

  .boxicon {
    height: 150px;
    float: left;
    margin: 5px;
  }

  .textthing {
    float: left;
    text-align: center;
    padding-top: 48px;
    margin-left: 20px;
  }

  .containerx {

  }

  .rowx {
    width: 95%;

  }

  .colx {
    width: 45%;
    float: left;
    background-color: #000;
    margin-left: 5%
  }

  @media screen and (max-width: 600px) {
    .colx {
      width: 100%;
      margin-bottom: 5px;
    }
  }

Full Code: pastebin

Desired Layout: https://i.sstatic.net/YkmVC.png

Current Output: https://i.sstatic.net/OuXy2.png

htmlcsssvgmultiple-columns

Answer №1

I suggest transitioning from the box-model to the flex-model for enhanced control over alignment and positioning:

.boxicon {
  height: 150px;
  margin: 5px;
}

.textthing {
  text-align: center;
  display: block;
  margin: 10px;
  color: white;
  flex-grow: 1;
}


.rowx {
  display: flex;
}

.colx {
  flex-grow: 1;
  display: flex;
  align-items: center;
  background-color: #000;
  margin: 0 15px;
  padding: 10px;
}

@media screen and (max-width: 600px) {
  .colx {
    margin: 10px 15px;
  }
  .rowx {
  flex-direction: column;
}
<div class="containerx">
  <div class="rowx">
    <div class="colx">
      <svg class="boxicon" version="1.1" viewBox="0.0 0.0 616.4015748031496 615.514435695538" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <clipPath id="p.0">
          <path d="m0 0l616.40155 0l0 615.51447l-616.40155 0l0 -615.51447z" clip-rule="nonzero"></path>
        </clipPath>
        <g clip-path="url(#p.0)">
          <path fill="#000000" fill-opacity="0.0" d="m0 0l616.40155 0l0 615.51447l-616.40155 0z" fill-rule="evenodd"></path>
          <path fill="#efefef" d="m0 307.68503l0 0c0 -169.92975 137.75528 -307.68503 307.68503 -307.68503l0 0c81.60315 0 159.86404 32.416725 217.5662 90.11886c57.70215 57.70214 90.118835 135.96304 90.118835 217.56616l0 0c0 169.92978 -137.75525 307.68503 -307.68503 307.68503l0 0c-169.92975 0 -307.68503 -137.75525 -307.6850...

Key advantages include:

  • No need for additional top paddings to vertically align elements
  • <svg> scales down appropriately when space is limited

There are more benefits, but in simple terms, it offers precise control over alignment and positioning.

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

Three.js is failing to render within a specified div

My current project involves utilizing three.js to create a cube rendering. Despite the cube appearing on the screen, I am facing issues with getting it to display within the specified div element and in the desired style. HTML: <div id="render"> & ...

javascripthtmlcssthree.js

Enhance your website design with a custom content scroller using Bootstrap and

Having trouble getting this plugin to work with bootstrap on my website. Does anyone have a solution for this issue? Alternatively, does anyone know of another approach I could take? UPDATE: I managed to fix the problem myself. Add the following code ...

javascripthtmlcssjquery-pluginstwitter-bootstrap-3

Variable in SCSS not being applied as expected

I'm currently grappling with understanding why my alterations to the system colors aren't reflecting as expected. When viewing in Chrome, this is the image I see. https://i.sstatic.net/H6YbW.png However, this is what I anticipate should be vis ...

htmlcssangularsass

How to specifically exclude a checkbox from the "select all" function in J

One way to select all checkboxes with HTML code: Select All <input type="checkbox" name='select_all' id='select_all' value='1'/> To achieve this with Javascript code: <script type="text/javascript> $(&apos ...

javascriptjqueryhtmlcheckbox

Assign a "margin-bottom" value of "0" to all elements in the final row of a responsive layout

I'm currently working on a Bootstrap responsive template design where I have multiple items arranged in rows. The number of items per row and the number of rows vary depending on the screen resolution. <div class="row"> <div class="col-xs- ...

htmlcsstwitter-bootstrap

Adjusting the alignment of Bootstrap navbar items upon clicking the toggle button

When I click the toggle button on a small screen, my navbar items appear below the search bar instead of aligning with the home and about elements. Below is an image depicting this issue: https://i.stack.imgur.com/4rabW.png Below is the HTML code structu ...

javascripthtmltwitter-bootstrap

Show and hide HTML div elements dynamically using jQuery based on the selection from a dropdown

I am attempting to display or hide various divs based on user input from a select drop-down box. In fact, I initially tried to directly use the code from jQuery dropdown hide show div based on value, but I seem to be missing something simple that is preven ...

jqueryhtmlshow-hide

Steps to Embed a Link in a Jumbotron's Background Image

I'm facing a challenge with my jumbotron that has a background image. I want to make the image clickable so that it redirects to another page when clicked. I attempted to add an image tag with a src attribute, but it ended up overlaying another image ...

htmlcssbootstrap-4

What is the process for updating the names and IDs of HTML elements?

I need help with updating the index of elements in a dynamic form when an item is deleted. For instance, if I have items named items1, items2, items3, items4, and items5, and I delete items3, I want the remaining items to be re-indexed to items1, items2, i ...

javascriptjqueryhtml

Animate a box moving continuously from the right to the left using jQuery

I'm trying to create a continuous motion where a box moves right, then left, and repeats the cycle. However, I can only get it to complete one cycle. $(document).ready(function() { function moveBox() { $('#foo').css({ 'ri ...

javascriptjqueryhtml

Excessive Spacing Below Picture

I am trying to position an image and a div directly beneath it, but I am encountering an issue with a visible margin between the two elements. You can view the code snippet here: http://jsfiddle.net/d3Mne/1/ Upon further investigation, I have noticed that ...

htmlcss

Troubleshooting problem with SVG icons not highlighting correctly when clicked on mobile devices

I recently incorporated SVG icons into my website. However, when I tap on them using a mobile browser, the browser highlights the icon. Is there a way to disable this highlighting effect? Example: highlight Code: <div class="ictg-before"> <svg ...

htmlcsssvg

How can you confirm the validity of a dropdown menu using JavaScript?

<FORM NAME="form1" METHOD="POST" ACTION="survey.php"> <P>q1: How would you rate the performance of John Doe? <P> <INPUT TYPE='Radio' Name='q1' value='1' id='q1'>1 ...

javascriptjqueryhtml

Injecting background images with CSS in Vue3

After exploring answers to my previous inquiry, I am now seeking guidance on how to inject both a variable and a URL image into my scoped CSS. Despite trying various combinations, none seem to be effective: <template> <header class=< ...

cssvue.jssassvuejs3scoped

Switching up the colors of toggle arrow icons using jQuery

https://i.sstatic.net/Id0XP.png I am currently working on sorting a table and I want to use arrows to indicate which column is being sorted. I have the functionality to sort with arrows in place, but I would like to customize the color of the arrow in the ...

javascriptjqueryhtml

Troubleshooting the issue of JavaScript not executing on elements with a specific CSS class

I am attempting to execute a JavaScript function on each element of an ASP.NET page that is assigned a specific CSS Class. Despite my limited knowledge of JavaScript, I am unable to determine why the code is not functioning properly. The CSS Class is being ...

javascriptjqueryhtmlcssasp.net

Disappearing Value Dilemma in Submit Button

I'm encountering an issue with a button. After making a minor modification to an echo line, the button that I have to submit a form suddenly has a blank value. This only happens when I make this specific change. I am aware of the duplicate IDs of "sub ...

phphtmlformssubmit

Identify Horizontal Swipe Gestures on Page-level

I am currently focused on ensuring accessibility for users utilizing voiceover technology. While navigating their phone, these individuals rely on right and left swipes to interact with elements on a page. I am seeking to implement swipe detection at the ...

javascripthtmlreactjsaccessibilitywai-aria

JavaScript accordions failing to open

I've encountered an issue with my website that includes JS accordions. Strangely, they are not opening on the live site, but they function properly on Codepen. I checked the console in Chrome and found no error messages, however, when I looked at the ...

javascripthtmlcssaccordion

Arrange three input fields horizontally with labels positioned above each

I am facing a minor problem with aligning three input fields in the same row while maintaining equal spacing between each of them. I attempted to accomplish this using display: flex and space-between, but then the label appears to the left of the input in ...

htmlcssvue.jsvuejs2