My flex elements are unresponsive. What adjustments can I make to my code to address this issue?

Is there a reason why I am unable to utilize the CSS properties justify-content: space-between, or space-around?

.mobile-page-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mobile-nav {
  display: flex;
  justify-content: space-between;
}
<div class="mobile-page-wrapper">
  <div class="mobile-nav">
    <img src="./img/mobile-nav-logo.svg" alt="LOGO" class="logo-mobile">
    <ul class="mobile-soc">
      <li><img class="mobile-fb" src="./img/Facebook.svg" alt="Facebook"></li>
      <li><img class="mobile-vk" src="./img/VK.svg" alt="Vk"></li>
      <li><img class="mobile-inst" src="./img/Instagram.svg" alt="Instagram"></li>
    </ul>
  </div>
  <!-- /.mobile-nav -->
  <div class="main-idea-mobile">
    <h1>SSDSDSDS<br>DASDASD</h1>
  </div>
  <!-- /.main-idea-mobile -->

</div>
<!-- /.mobile-page-wrapper -->

I am interested in using the combination of justify-content: space-between; along with flex-direction: column, but it seems to be causing issues. Any suggestions on how to resolve this problem would be greatly appreciated.

htmlcssflexbox

Answer №1

To create more spacing between the elements within mobile-wrapper, it is necessary to define its height property.

The use of 

display: flex; justify-items: space-between;
appears to be effective on mobile-nav due to its block-level element nature with a default width of 100% and default flex-direction of row.

As an illustration, I have included your code snippet below setting the height of mobile-wrapper to 100vh:

.mobile-page-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}

.mobile-nav {
  display: flex;
  justify-content: space-between;
}
<div class="mobile-page-wrapper">
  <div class="mobile-nav">
    <img src="./img/mobile-nav-logo.svg" alt="LOGO" class="logo-mobile">
    <ul class="mobile-soc">
      <li><img class="mobile-fb" src="./img/Facebook.svg" alt="Facebook"></li>
      <li><img class="mobile-vk" src="./img/VK.svg" alt="Vk"></li>
      <li><img class="mobile-inst" src="./img/Instagram.svg" alt="Instagram"></li>
    </ul>
  </div>
  <!-- /.mobile-nav -->
  <div class="main-idea-mobile">
    <h1>SSDSDSDS<br>DASDASD</h1>
  </div>
  <!-- /.main-idea-mobile -->

</div>
<!-- /.mobile-page-wrapper -->

(Upon reviewing both your initial code and my altered version, they may appear similar in the small window view; however, clicking on full page will reveal the distinctions)

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

What is the best way to make the div inside the table cells expand to fill the available space?

I'm having trouble making the inner divs within table cell divs expand and fit their parent div without overlapping the next cell below it. Check out the sandbox for reference I've outlined the areas in grey where I want the cells to be filled. ...

css

Double tap on the YouTube video

Recently, I added a YouTube video to my project. However, I am encountering an issue where when I double click on the video, it opens in a new tab. What I actually want is for the video to open in full screen when clicked. Appreciate any help! ...

asp.nethtmlyoutube

What could be the reason for the bootstrap carousel not displaying any images, not even the placeholders?

I'm having an issue with my Bootstrap carousel. I followed the code from the documentation on how to use a carousel, but the images are not displaying. Even the gray squares that are supposed to act as placeholders are not showing up. Why is this happ ...

htmlcsstwitter-bootstrap

What is the best way to populate an HTML table with missing values from a multidimensional associative array in PHP?

I'm facing a challenge while trying to display an array in an HTML table using PHP. The issue arises when the elements in the array have varying numbers (e.g., missing fields). How can I resolve the issue of some header elements being absent from the ...

phphtmlarrays

"Trouble arises when attempting to render a basic Vue.Draggable component within a nested ul

Problem with Nesting After receiving feedback from @Amaarrockz, I attempted to create a sandbox to address the issue I'm facing. However, the problem persists. Here's the code snippet: <div id="app"> <ul> <li ...

javascripthtmlvue.jsvue.draggable

Once I have verified the accuracy of certain $_POST variables, I am looking to close my window. Is there a way to achieve this using JQuery?

<?php if($_POST["some_variable"]){ echo "this window should be closing now"; } ?> How do I implement a JQuery function to close the window? The code snippet below demonstrates how the window was initially opened... $('.new_windo ...

phpjavascriptjqueryhtml

Unable to modify variable to play audio

As I work on constructing my website, I am incorporating various sounds to enhance user experience when interacting with buttons and other elements. However, managing multiple audio files has proven challenging, as overlapping sounds often result in no aud ...

javascripthtmlaudiovar

jQuery load() function running very slowly

My jquery call to load a page sometimes takes about 30+ seconds, while other times it loads quickly as expected. To troubleshoot this issue, I attempted to replicate it in jsfiddle due to the complexity of the actual page's code. However, I was unsucc ...

jqueryhtml

Easily update form elements with dynamic MySQL integration

I am currently working on creating a page that allows users to add and delete "soldiers" dynamically. Here is the structure I am aiming for: [Text-box][Delete] [Text-box][Delete] [Add-Soldier] It is important to me that this functionality supports MySQL ...

phpjavascriptmysqlhtmldynamic

Create the design shown below without using the <pre> tag

Creating this pattern using <pre> is straightforward, but I am interested in achieving the same result with <div> Is it possible to do this with margins? I attempted to use margins and was able to achieve success, although some patterns prove ...

htmlcss

Transform SCSS into CSS effortlessly

Within my ASP.NET project, I have both scss and css files. If I make changes to the scss file, is it necessary for the css file to be regenerated? If so, what is the most effective method for doing this? Can Visual Studio handle this task or do I need a d ...

asp.netcssvisual-studio-2010sass

Adjust the height of a div containing variable elements

I'm having trouble adjusting the height of a div so that it can be scrolled all the way through. This div is positioned next to another one, so I set the overflow-y to scroll. Initially, I thought setting the height to auto would solve the issue, but ...

javascripthtmlcssscroll

Simple method to toggle between elements using jQuery

After creating a script using jQuery to show/hide content when tabs are clicked (which also changes the color of the clicked tab), everything is functioning smoothly. However, I believe there may be a more efficient way to switch between content that allow ...

javascriptjqueryhtmlcsstabs

What is the best method for transferring a model (specifically, a List containing over 3000 records) from one view to another GET action within ASP.Net Core?

I am facing an issue with my ASP.net Core project. I am trying to pass a model, which is a list of products, from one view to another controller action using an "a" tag. I initially tried using TempData but it did not work as expected due to the complexity ...

c#htmlasp.net-coreparameter-passingmodel-binding

Mobile Display of Div Blocks

I am having trouble with my media query not working to display "third_div" as a block in mobile and inline on a desktop. I have included two pictures demonstrating what I want to achieve. How can I resolve this issue? View Picture One View Picture Two ...

htmlcss

Angular - Modify the Background Color of a Table Row Upon Button Click

I am struggling to change the background color of only the selected row after clicking a button. Currently, my code changes the color of all rows. Here is a similar piece of code I have been working with: HTML <tr *ngFor="let data of (datas$ | asyn ...

cssangularhtml-tableangular8

Steps for making a toggle button with Bootstrap

Initially, I developed a web application using HTML, CSS, and JavaScript. Later on, I was requested to recreate it using Bootstrap as well. While I managed to complete the task successfully, I encountered an issue where toggle buttons in the web app revert ...

javascriptjquerycsstwitter-bootstrapjqtouch

What is the necessity of using `&nbsp;` in HTML definition lists?

I have often used the code below to create a table without using HTML table tags. Perhaps I should consider switching to using the table tag, but that's not the issue at hand. If the <dd> tag is empty, the next <dt> tag will not float lef ...

htmlcss

Creating tick lines around a solid gauge in Highcharts is a simple process that can enhance the

I am currently working with Highcharts and have a lot of dependencies on it, so I cannot use other plugins. $(function () { var gaugeOptions = { 'chart': { 'type': 'solidgauge' }, &a ...

javascriptjqueryhtmlcsshighcharts

Ways to add style to Chrome without causing any changes in Edge

I'm working on fixing a bug in Chrome and have successfully applied a style to correct it. However, when I view it in Edge, the appearance is not right. How can I target only Chrome (version 60) with my styles, without affecting other browsers? @medi ...

cssgoogle-chromemicrosoft-edge