Using float left and right/ width 50% is not allowing my content to be responsive on mobile view

Question

I'm using "tiles" to show content, clicking on a tile expands content. Within the expanding content, I'm using the left hand side for displaying text (spec-info) and for the right hand side I'm using (icon-percent) to display an icon. I'm happy with this outcome as the icon sitting at the right hand side is positioned well in comparison to the text. However when on smaller device sizes, (ipad, iphone) - the "split" view of using left and right would be reverted to full width with the icon scaling appropriately and displaying above the text. I'm familiar with media queries but not sure they're appropriate for this implementation? any ideas would be really appreciated! I've created a working fiddle here too: https://jsfiddle.net/6gsvjt4r/1/

function openTab(tabName, event) {
  event.target.classList.add("active-tile");
  event.target.children[2].classList.add("arrow-up");
  var i, x;
  x = document.getElementsByClassName("content");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(tabName).style.display = "block";

  // Get all the tabs into a collection
  // (don't use .getElementsByClassName()!)
  let tabs = document.querySelectorAll(".tile");

  // Set up a click event handler on each of the tabs
  tabs.forEach(function (tab) {
    tab.addEventListener("click", function (event) {
      // Loop over all the tabs and remove the active class
      tabs.forEach(function (tab) {
        tab.classList.remove("active-tile");
        tab.children[2].classList.remove("arrow-up");
      });

      // Set the background of the clicked tab
      this.classList.add("active-tile");
      tab.children[2].classList.add("arrow-up");
    });
  });
}
function closeTab(tabName, event) {
  x = document.getElementsByClassName("content");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  let tabs = document.querySelectorAll(".tile");
  tabs.forEach(function (tab) {
    tab.classList.remove("active-tile");
    tab.children[2].classList.remove("arrow-up");
  });
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.graph-section {
  padding-top: 70px;
}

.section-content-specialisms {
  max-width: $page-width;
  margin: 0 auto;
  padding: 0 $p-base;
  margin-bottom: 70px;

  justify-content: space-between;
  position: relative;
}

@media (min-width: $tablets) {
  .section-content-specialisms {
    flex-direction: row;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding-right: 6rem;
  padding-left: 6rem;
}

.tile,
.active-tile,
.content {
  box-sizing: border-box;
}

.tile > * {
  pointer-events: none;
}

.tile {
  flex: 1 0 auto;
  order: 0;
  flex-basis: 25%;
  border: 1px solid grey;

  /* For visual only  */
  background-color: #222;
  height: 150px;
  text-align: center;
  font-size: 16px;
  color: white;
  cursor: pointer;
}

.active-tile {
  flex: 1 0 auto;
  order: 0;
  flex-basis: 25%;

  /* For visual only  */
  text-align: center;
  border: 1px solid #000;
  background-color: green;
  cursor: pointer;
}

.content {
  order: 1;
  flex: 1 0 100%;

  /* For visual only  */
  padding: 20px;
  color: black;
  text-align: center;
  border: 1px solid #000;
  background-color: #228b22;
}

.description {
  text-align: left;
}

.spec-info {
  text-align: left;
  width: 50%;
  float: left;
}

.percent-icon-size {
  width: 295px;
  height: 260px;
}

.icon-percent {
  width: 50%;
  float: right;
}

.icon-spacing {
  margin-top: 24px;
}

/* Clear floats after the tiles */
.box:after {
  content: "";
  display: table;
  clear: both;
}

.closebtn {
  float: right;
  color: black;
  cursor: pointer;
}

.arrow-down {
  width: 25px;
  height: 25px;
}

.arrow-up {
  width: 25px;
  height: 25px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.specialisms-content {
  padding-top: 25px;
  padding-bottom: 25px;
}

.percentage {
  color: #228b22;
}

/* 
  "Desktop" and above
 */
@media (max-width: 480px) {
  .box {
    flex-direction: column;
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .content {
    order: 0;
  }
}

@media (max-width: 768px) {
  .box {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}


   
        
        Banking
        
      
      
        ×
        

        
          Banking
          
            Core banking products including personal current accounts,
            savings and mortgages. This category also includes banking
            platforms and operations FinTechs such as Railsbank and
            challenger banks such as Atom.
          
          
            Banking Personal Current Accounts (PCA)
            Banking Platforms
            Banking Operations
          
        
        
          
        
      


RegTech



×

RegTech - 10%

  This FinTech category focuses on companies with activities and
  technology focused on reimagining and streamlining risk (AML, KYC),
  credit scoring and compliance software.





InsurTech



×

InsurTech - 6%

  InsurTech includes companies selling insurance digitally or introducing
  new business models or (re)insurance specific software.


  InsurTech - Commercial
  InsurTech - Personal
  Insurance Platforms and Operations





Lending



×

Lending - 13%

  Companies focused on innnovating credit, from commerical to alternative
  and specialist lenders or platforms facilitating P2P.


  Consumer Lending
  Commercial Lending
  P2P Lending

code and pixels · Accepted Answer

There are a couple of things I'd suggest doing:

Remove fixed sizing on the .percent-icon-size image

I see in your CSS, you have the height and width set on

.percent-icon-size {
    width: 295px;
    height: 260px;
}

This is keeping this image at the same size no matter how large or small the panel containing the content is. The following snippet would make the image be as large as it can be but be limited to the width of it's container:

.percent-icon-size {
    width: 100%;
    max-width: 100%;
}

From here, you could do a couple things

Either keep the 2 columns but change the widths of them (maybe 70/30, etc.) or as you've already mentioned, use a media query and not have columns on smaller screen sizes. The following snippet is an example of the the 2nd approach:

// Mobile, single column
// If you're using any other "Mobile First" approaches, 
// you may not need the media query
// 
// I'm arbitrarily selecting a max-width pixel value;  
// you'd want to update this according to your needs.
@media (max-width: 767px) {
    .spec-info, .icon-percent {
        width: 100%;
        float: none;
    }

    .percent-icon-size {
        width: 100%;
        max-width: 100%;
    }
}

Hope this helps, happy coding.

Using float left and right/ width 50% is not allowing my content to be responsive on mobile view

Answers (1)

Related Questions