Having trouble getting flex-wrap to function properly on my div element

For the 928px breakpoint, my aim is to:

  1. Have my right column (.vd-right-col) positioned at the bottom of the page. (I attempted to achieve this using flex-wrap:wrap; but it did not work.)

  2. Arrange the two images in this column side by side.

Unfortunately, it seems unresponsive. Any suggestions on why?

@charset "UTF-8";

/* CSS Document */

/*Vivid Global Styling*/

html {} body {
  margin: 0px;
  padding: 0px;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
span {
  margin: 0px;
  padding: 0px;
}
h1 {
  margin: 0 0 14px 0;
}
h2 {
  margin: 0 0 10px 0;
}
.wht {
  color: #fff;
}
.clear {
  clear: both;
}
/*Vivid Page Settings*/

header {
  width: 100%;
  background-color: #fff;
  border-bottom: #000 1px solid;
}
.vd-hide {
  display: none;
}
.vd-settings-wrapper {
  width: 15%;
  max-width: 200px;
}
.vd-user-settings {
  width: 48px;
  height: 48px;
  border: 1px solid #000;
  background-color: #fff;
  float: left;
  margin: 12px 2px 0 21px;
}
.vd-currency-selector {
  width: 58px;
  height: 21px;
  border: 1px solid #000;
  background-color: #fff;
  float: left;
  margin: 12px 2px 1px 2px;
}
.vd-language-selector {
  width: 58px;
  height: 21px;
  border: 1px solid #000;
  background-color: #fff;
  float: left;
  margin: 3px 2px 0 2px;
}
/*Vivid Main Navigation*/

.vd-nav-wrapper {
  width: 75%;
  height: 78px;
  margin: 0 auto;
  text-align: center;
}
.vd-nav-wrapper ul {
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.vd-nav-wrapper li {
  text-decoration: none;
  list-style: none;
  display: inline-block;
  margin: 25px 20px;
  vertical-align: middle;
}
.vd-nav-wrapper a {
  text-decoration: none;
  list-style: none;
  display: inline-block;
  margin: 18px 20px;
  vertical-align: middle;
}
.vd-logo-img {
  margin: 0px;
  padding: 0px;
}
/*Vivid Checkout Settings*/

.vd-cart-wrapper {
  width: 10%;
  z-index: 10;
}
.vd-cart-selector {
  width: 48px;
  height: 48px;
  border: 1px solid #000;
  background-color: #fff;
  margin: -11px 31px 0 2px;
  position: absolute;
  top: 23px;
  right: -9px;
}
/*Vivid Main Wrapper*/

.vd-page-container {
  /* width: 100%; */
  margin: 0 auto;
  display: flex;
  /* max-width: 1280px; */
  flex-direct...

Answer №1

Within your 928px media query, you have specified flex-wrap: wrap for the right column:

@media screen and (max-width: 928px) {
    .vd-grid-right-col {
        flex-wrap: wrap;
}

By doing this, you are allowing the children of this container to wrap. However, keep in mind that the container has flex-direction: column applied, which means the wrapping will occur vertically, not horizontally.

For the desired effect, consider making the following adjustments:

@media screen and (max-width: 928px) {
    .vd-grid-right-col {
        flex-direction: row;
     }
    .vd-grid {
        flex-wrap: wrap;
     }
}

view updated fiddle

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

The inserted button's click event does not trigger the contentEditable DIV

I have a contentEditable DIV that I manage using the directive below: <div class="msg-input-area" [class.focused]="isMsgAreaFocused" contenteditable [contenteditableModel]="msgText" (contenteditableModelChang ...

Aligning content within a table cell using the Div tag

I am struggling with a <td> that looks like this: <td valign="middle" class="table_td td top" style="width: 347px"> <div id="Style" style="position:absolute;"> <img src="images/additional-keywords-image.gif" style="background: ...

Content move to the left with Material UI's shifting capabilities

Is anyone experiencing an issue with Material UI dropdown Select and Modals causing the content to shift to the left? I attempted using position: absolute on both the Select element and MenuItems, but unfortunately the content still shifted. Has anyone e ...

Foundation Unveil Modal hidden from view

I'm currently integrating modals using Foundation 5 in a Rails application. The issue I'm facing is that the modal only works when the page is not scrolled down. If you scroll to the bottom of the page and try to activate the modal by clicking ...

The navigation area is too small for the social media buttons to fit

Hi everyone, I'm encountering an issue with the social media buttons on my website. They're not staying in the navigation header area despite trying to use the float attribute. Here are some images illustrating the problem: https://i.stack.imgur ...

Position the Bootstrap icon to float to the far right

My icon is always positioned to the right instead of beside the input field. Take a look at the image below: https://i.stack.imgur.com/Bb1eH.png The icon does not align next to the input field. This is my code snippet : <div class="form-horizontal"& ...

Make sure to incorporate the Readme.md file into your HTML document

I am currently managing a static HTML page on my personal server. The README.md file for this project is stored in a public GitHub repository. My goal is to have the contents of the ReadMe automatically included on my local HTML page. Essentially, I am lo ...

What's the best way to include CSS and Javascript in an HTML document?

I'm still getting the hang of CSS and JavaScript. I stumbled upon a cool countdown timer that I'd like to incorporate into my website, but I'm not quite sure how to place it where I envision it. Check out the timer here CSS: html,body{mar ...

Tips for making content vanish or remain concealed behind a see-through header during page scrolling

I made a JavaScript fiddle http://jsfiddle.net/claireC/8SUmn/ showcasing a fixed transparent header. As I scroll, the text scrolls up behind it. How can I make the text disappear or be hidden behind the transparent div when scrolling? Edit: I should also ...

Google Chrome applying its unique style compositions

I recently started transitioning a website from HTML to Wordpress, and encountered an unexpected challenge with Google Chrome applying unfamiliar styles. Specifically, the issue lies with the positioning of the background image bg.gif. While Internet Explo ...

What is the best way to target an HTML element that is only connected to a particular class?

My HTML code includes the following 3 elements: <span class="a b"></span> <span class="a"></span> <span class="a b"></span> I am trying to select the element that only has the class "a". When I use $("span.a"), it sele ...

Tips for troubleshooting objects within an Angular template in an HTML file

When I'm creating a template, I embed some Angular code within my HTML elements: <button id="btnMainMenu" class="button button-icon fa fa-chevron-left header-icon" ng-if="(!CoursesVm.showcheckboxes || (CoursesVm.tabSelected == 'curren ...

Tips for resolving a 403 error while utilizing selenium with Python

What is the solution to fixing a 403 error? I have noticed that when trying to access a certain website, I am able to browse for about 30 seconds before encountering a 403 error. This issue only started occurring today, and I find it strange because if m ...

Listening for an event or using a CSS pseudo-class to detect when the scrollbar becomes

Are there any JavaScript event listeners or CSS pseudo classes that can detect when a scrollbar appears and disappears? For example, on Mac OS and Windows Internet Explorer 10 or newer, the scrollbars are hidden by default but appear when scrolling begins. ...

Problem with BeautifulSoup table parsing

I've been trying to create a table with expenses, amounts, and actions, but I'm having trouble with the alignment. I attempted to adjust it by changing the width, but that didn't solve the issue. Can someone point out what I'm doing wro ...

A guide to displaying jQuery UI autocomplete on an HTML textbox

Here's my code snippet: I've been trying to implement autocomplete functionality by fetching values through Ajax, but I've hit a roadblock. Despite going through numerous solutions on Stack Overflow, I haven't been able to resolve the i ...

Top-to-Bottom Border Vanishing

I have a div that has a left border with the following style: border-left: 3px solid #F90; Now, I want the border to fade out gradually from top to bottom, going from full opacity at the top to completely transparent at the bottom. However, my attempt usi ...

The Material-UI TextField is placed in the Header section of the page

As I scroll down the page, I noticed that the TextField in the header area remains visible. This header is styled using CSS and includes a TextField from the material-ui library. This is my first time creating a header with CSS. Are there any specific cod ...

Is your website designed to adapt effortlessly to all screen sizes?

After uploading my web pages to a server, I've been testing them on various screen sizes and resolutions. Although everything looks good on larger screens, it's not scaling well on smaller resolutions like 800 x 600, 640 x 480, and 240 x 320. Cou ...

Scroll within the inner container

I am currently working on creating panels, each with a header and content. My goal is to allow scrolling only within the content area. Here is the CSS I have been using: .content-div{ float:left; height: 400px; overflow-x:hidden; overflow-y:hidden; ...