Could someone assist me with rearranging blocks in Squarespace by utilizing CSS?

Question

Could someone assist me with rearranging blocks in Squarespace by utilizing CSS?

Greetings, fellow readers! After a period of silent observation, I am finally making my presence known.

My wife and I are in the process of creating her freelance services website. However, we have encountered a troublesome issue that has left me quite perplexed despite my persistent attempts to rectify it.

I've experimented with various combinations of CSS classes like .row, .sqs-row, .col, among others, in an effort to reorder the blocks on our website's mobile view, but alas, to no avail.

If you wish to visit the site, here's the URL: (password: yosydesign2021).

In the desktop version, the steps are displayed as follows:

1 2 3 4 5 6

For reference, here is the desktop view: desktop view

However, in the mobile view, the order appears jumbled:

1 4 2 5 3 6

Here are snapshots of the mobile view for further clarity: mobile view1 | mobile view2

The latest solution I attempted involved the following code snippet:

@media screen and (max-width:640px) {
 div#page-section-60482408b332ea04661c1cf0> .row .sqs-row {
    display: flex;
  flex-direction: column;
   
   
  }
 #block-25053f13e7adbb1c828d{order:2 !important;}
}

Despite multiple adjustments, this method failed to yield the desired outcome. While I grasp the need to apply the display:flex attribute before using the order property, it seems stubbornly resistant to functioning correctly.

Your assistance and guidance would be greatly appreciated, especially given my limited understanding of CSS.

css bootstrap-4 squarespace

Answer 1

Answer №1

When I copied the code for a grid section from the website mentioned in this link, I noticed that the ordering in the HTML was not sequential. The container labeled as 04 appeared right after the first one, and 05 came after the second. It seems like this was how the columns were structured to create a "grid" layout on Squarespace. After rearranging the elements in the correct order within the HTML, everything fell into place as expected.

If you prefer to maintain the out-of-order sequence in the HTML, you can utilize the order property to ensure the items are displayed in ascending order visually. However, it's essential to consider the following:

Using the order property may disconnect the visual presentation of content from the DOM order, impacting users with low vision who rely on assistive technologies like screen readers. If visual (CSS) order is crucial, screen reader users may not access the correct reading order.

.flex {
  display: flex;
  flex-wrap: wrap;
}

.flex div {
  margin: 1rem;
}

.one {
  order: 1;
}

.two {
  order: 2;
}

.three {
  order: 3;
}

.four {
  order: 4;
}

.five {
  order: 5;
}

.six {
  order: 6;
}

<div class="flex">
  <div class="one">
    <h2>01</h2>
    <h3>Get a Quote</h3>
    <p>some text</p>
  </div>
  <div class="four">
    <h2>04</h2>
    <h3>Project Development</h3>
    <p>some text</p>
  </div>
  <div class="two">
    <h2>02</h2>
    <h3>Schedule Your Project
</h3>
    <p>some text</p>
  </div>
  <div class="five">
    <h2>05</h2>
    <h3>Revisions</h3>
    <p>some text</p>
  </div>
  <div class="three">
    <h2>03</h2>
    <h3>Project Start</h3>
    <p>some text</p>
  </div>
  <div class="six">
    <h2>06</h2>
    <h3>Project Completion</h3>
    <p>some text</p>
  </div>
</div>

To add custom styling, it is recommended to use CSS Grid and arrange HTML elements in ascending order for optimal accessibility for those using assistive technologies to navigate through websites.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin: 1rem auto;
  max-width: 110ch;
}

.grid div {
  text-align: center;
}

<div class="grid">
  <div>
    <h2>01</h2>
    <h3>Get a Quote</h3>
    <p>some text</p>
  </div>
  <div>
    <h2>02</h2>
    <h3>Schedule Your Project
</h3>
    <p>some text</p>
  </div>
  <div>
    <h2>03</h2>
    <h3>Project Start</h3>
    <p>some text</p>
  </div>
  <div>
    <h2>04</h2>
    <h3>Project Development</h3>
    <p>some text</p>
  </div>
  <div>
    <h2>05</h2>
    <h3>Revisions</h3>
    <p>some text</p>
  </div>
  <div>
    <h2>06</h2>
    <h3>Project Completion</h3>
    <p>some text</p>
  </div>
</div>

Answer 2

When I copied the code for a grid section from the website mentioned in this link, I noticed that the ordering in the HTML was not sequential. The container labeled as 04 appeared right after the first one, and 05 came after the second. It seems like this was how the columns were structured to create a "grid" layout on Squarespace. After rearranging the elements in the correct order within the HTML, everything fell into place as expected.

If you prefer to maintain the out-of-order sequence in the HTML, you can utilize the order property to ensure the items are displayed in ascending order visually. However, it's essential to consider the following:

Using the order property may disconnect the visual presentation of content from the DOM order, impacting users with low vision who rely on assistive technologies like screen readers. If visual (CSS) order is crucial, screen reader users may not access the correct reading order.

.flex {
  display: flex;
  flex-wrap: wrap;
}

.flex div {
  margin: 1rem;
}

.one {
  order: 1;
}

.two {
  order: 2;
}

.three {
  order: 3;
}

.four {
  order: 4;
}

.five {
  order: 5;
}

.six {
  order: 6;
}

<div class="flex">
  <div class="one">
    <h2>01</h2>
    <h3>Get a Quote</h3>
    <p>some text</p>
  </div>
  <div class="four">
    <h2>04</h2>
    <h3>Project Development</h3>
    <p>some text</p>
  </div>
  <div class="two">
    <h2>02</h2>
    <h3>Schedule Your Project
</h3>
    <p>some text</p>
  </div>
  <div class="five">
    <h2>05</h2>
    <h3>Revisions</h3>
    <p>some text</p>
  </div>
  <div class="three">
    <h2>03</h2>
    <h3>Project Start</h3>
    <p>some text</p>
  </div>
  <div class="six">
    <h2>06</h2>
    <h3>Project Completion</h3>
    <p>some text</p>
  </div>
</div>

To add custom styling, it is recommended to use CSS Grid and arrange HTML elements in ascending order for optimal accessibility for those using assistive technologies to navigate through websites.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin: 1rem auto;
  max-width: 110ch;
}

.grid div {
  text-align: center;
}

<div class="grid">
  <div>
    <h2>01</h2>
    <h3>Get a Quote</h3>
    <p>some text</p>
  </div>
  <div>
    <h2>02</h2>
    <h3>Schedule Your Project
</h3>
    <p>some text</p>
  </div>
  <div>
    <h2>03</h2>
    <h3>Project Start</h3>
    <p>some text</p>
  </div>
  <div>
    <h2>04</h2>
    <h3>Project Development</h3>
    <p>some text</p>
  </div>
  <div>
    <h2>05</h2>
    <h3>Revisions</h3>
    <p>some text</p>
  </div>
  <div>
    <h2>06</h2>
    <h3>Project Completion</h3>
    <p>some text</p>
  </div>
</div>

Could someone assist me with rearranging blocks in Squarespace by utilizing CSS?

Answer №1

Similar questions

The origin of the image is specified within the HTML document

Unable to display button image when using both id and style class in CSS

Uniform Image Sizes in Bootstrap Carousel (With One Exception)

Is there a way to prevent pop-up windows from appearing when I click the arrow?

Adjusting the tab size and space size to their default settings within VSCode

The out directory is lacking Styled JSX integration for Next.js

Guide on transferring href parameter from the parent Vue component to the child component

"Engaging with the touchscreen inhibits the triggering of click

Conceal the Angular Bootstrap modal instead of shutting it down

The process of downloading a webpage onto a computer is not completely successful

Achieve a CSS design similar to the Cinemax logo with angled background ends

The function assigned to [variable].onclick is not being executed, despite no errors being displayed in the console

Svelte components loaded with no design aspects applied

What is the best way to insert a scroll into a section of a circular shape seamlessly?

How can you ensure that text in a container automatically moves to a new line and causes the container to expand downward if necessary, when

The current page I'm working on is scrolling sideways, but I prefer a stationary layout without any scrolling

Compressing CSS with the help of Gulp

Create an eye-catching hexagon shape in CSS/SCSS with rounded corners, a transparent backdrop, and a

The mobile-responsive dropdown navigation bar functions well on browsers with small widths, but does not work properly on my phone

Generating alternate list items