Mobile column order
-
I am using a two column design, but I am having issue with the mobile mode. I added the css so that left column should be on top of right column in mobile mode. Instead it created this weird two column look. Basically, I single column in terms of look. @media (max-width: 768px) does not seem to control the behavior of mobile mode
.left-column {
order: 1;
}
.right-column {
order: 2;
justify-content: flex-start;
}the whole code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Structural Steel</title>
<style>
.wp-block-spacer {
display: none !important;
}
body, html {
margin: 0;
padding: 0;
font-family: 'Haboro Contrast', sans-serif;
height: 100%;
}
.wp-block-cover {
min-height: 100vh;
background-color: black;
color: white;
display: flex;
}
.wp-block-cover__inner-container {
flex-grow: 1;
display: flex;
width: 100%;
}
.main-content {
display: flex;
flex-grow: 1;
justify-content: space-between;
width: 100%;
}
.left-column {
flex: 0 0 auto;
padding-left: 40px;
padding-top: 40px;
}
.right-column {
flex: 0 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
padding-right: 40px;
height: 100vh;
}
.title {
font-size: 48px;
font-weight: 800;
text-transform: uppercase;
line-height: 1.3;
color: white;
}
.content-sections {
display: flex;
flex-direction: column;
gap: 20px;
width: 600px;
max-height: calc(100vh - 80px);
overflow-y: auto;
}
.section {
background: rgba(52, 52, 52, 0.80);
border-radius: 20px;
padding: 20px;
width: 100%;
box-sizing: border-box;
}
.section-title {
font-size: 28px;
font-weight: 600;
text-transform: uppercase;
line-height: 1.3;
margin-bottom: 15px;
}
.section-content {
font-size: 18px;
font-weight: 500;
line-height: 1.5;
}
@media (max-width: 768px) {
.wp-block-cover {
min-height: auto;
}
.wp-block-cover__inner-container {
flex-direction: column;
}
.main-content {
display: flex;
flex-direction: column;
}
.left-column, .right-column {
padding: 20px;
height: auto;
width: 100%;
box-sizing: border-box;
}
.left-column {
order: 1;
}
.right-column {
order: 2;
justify-content: flex-start;
}
.content-sections {
width: 100%;
max-height: none;
}
.title {
font-size: 36px;
word-wrap: break-word;
}
.section-title {
font-size: 24px;
}
.section-content {
font-size: 16px;
}
/* Fix text overflow */
.left-column, .right-column {
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
}
</style>
</head>
<body>
<div class="wp-block-cover alignfull has-custom-content-position is-position-top-left">
<div class="wp-block-cover__inner-container">
<main class="main-content">
<div class="left-column">
<h2 class="title">Structural Steel</h2>
</div>
<div class="right-column">
<div class="content-sections">
<div class="section">
<div class="section-title">About</div>
<div class="section-content">
Jay's Structural division is a subsidiary of Jay's Metal Products Ltd., specializing in structural building solutions tailored for commercial, retail, and industrial projects. Holding certification from the Canadian Welding Bureau (CWB), we offer expertise in the fabrication and erection of steel columns, beams, in-house joists, stairs, and railings.
<br><br>
We take a holistic approach to client needs by offering in-house drafting, fabrication, and on-site erection to complete a project life cycle. To plan and design projects, minimize complexities, and ensure structural integrity, we use the latest Building Information Modeling technology (BIM).
</div>
</div>
<div class="section">
<div class="section-title">Contact</div>
<div class="section-content">
Phone: (587) 287-1093
<br>
e-mail: [email protected]
</div>
</div>
<div class="section">
<div class="section-title">Projects</div>
<div class="section-content">Coming Soon!</div>
</div>
</div>
</div>
</main>
</div>
</div>
</body>
</html>The page I need help with: [log in to see the link]
Viewing 2 replies - 1 through 2 (of 2 total)
-
@threadi If you are referring this portion of the code since I don’t it being activated. Will add it back on. EDIT Weird adding the code back on work.
EDIT: Thanks for the help.
@media (max-width: 768px) {
.wp-block-cover {
min-height: auto;
}
.wp-block-cover__inner-container {
flex-direction: column;
}
.main-content {
display: flex;
flex-direction: column;
}
.left-column, .right-column {
padding: 20px;
height: auto;
width: 100%;
box-sizing: border-box;
}
.left-column {
order: 1;
}
.right-column {
order: 2;
justify-content: flex-start;
}
.content-sections {
width: 100%;
max-height: none;
}
.title {
font-size: 36px;
word-wrap: break-word;
}
.section-title {
font-size: 24px;
}
.section-content {
font-size: 16px;
}
/* Fix text overflow */
.left-column, .right-column {
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
}
Viewing 2 replies - 1 through 2 (of 2 total)
The topic ‘Mobile column order’ is closed to new replies.