CODEWITHSUNDEEP
htmlcsspadding
flash
flash

Reputation: 1517

Padding in mobile view in css

I have a fiddle which is working in a way that when I take it in the mobile view, the square boxes horizontally scroll.

The CSS codes which I have used for that are: 

@media only screen and (max-width: 767px)
{
.product-all-contents
{
   overflow-x: auto;
}

.product-contents .product{
  min-width: 50.795%;
  margin: 0 2%;
  padding-top: 3.91%;
  padding-left: 3.91%;    
  padding-right: 3.91%;
  }
}



Problem Statement:

I am wondering what changes I should make in the CSS codes in the fiddle so that I am able to give fair amount of padding in the mobile view at the extreme right as shown in the screen-shot below. At this moment, I can't see any padding at the extreme right in the fiddle.

enter image description here

Upvotes: 1

Views: 6074

Answers (1)

StefanBob
StefanBob

Reputation: 5128

Basically the elements are taking the padding space when overflow is set.

The solution is to add another wrapper. Here i just added a div with class wrapper and set the overflow on that, and the padding on outer container. 

.product-all-contents {
  background-color: #f0f0f0;
  width: 70%;
  margin: auto;
  padding: 1rem;
}

.wrapper {}

.product-contents {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-contents .product {
  width: 10%;
  text-align: center;
  height: 150px;
  padding-top: 1%;
  padding-left: 1%;
  padding-right: 1%;
  border-style: solid;
  border-width: 3px;
  border-color: rgb(145, 147, 150);
  background-color: white;
  border-radius: 10px
}

.ipads {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.tvs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.franchise-hub-text,
.cloud-based-text,
.business-analytics-text,
.tech-support-text,
.order-management-text,
.employee-management-text,
.white-label-text,
.brand-label-text,
.lead-tracking-text,
.custom-invoicing-text,
.goal-setting-text,
.customization-tools-text,
.royalty-calculator-text,
.email-marketing-text {
  width: 50%;
}

div.goal-setting,
div.customization-tools,
div.custom-invoicing,
div.lead-tracking,
div.email-marketing,
div.royalty-calculator,
div.brand-control,
div.franchisehubtv,
div.cloudbasedtextipad,
div.business-analytics,
div.tech-support,
div.employee-management,
div.order-management,
div.white-label {
  display: flex;
  margin-left: 15%;
  margin-right: 15%;
  align-items: center;
  background-color: #f0f0f0;
  padding: 2%;
  margin-bottom: 5%;
}

.product-quotes {
  display: block;
  padding: 20px 11px;
  width: 90%;
  color: #3b3b3d;
  background: white;
  border-radius: 2px;
  line-height: 1.625;
  font-family: 'Roboto';
  font-weight: normal;
  "

}

.arrow-down {
  width: 0;
  height: 0;
  margin: auto;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 40px solid #f0f0f0;
}

.white {
  display: none;
}

@media only screen and (max-width: 767px) {
  .wrapper {
    overflow-x: auto;
  }
  .product-contents .product {
    min-width: 50.795%;
    margin: 0 2%;
    padding-top: 3.91%;
    padding-left: 3.91%;
    padding-right: 3.91%;
  }
}

@media only screen and (max-width: 767px) {
  div.goal-setting,
  div.customization-tools,
  div.custom-invoicing,
  div.lead-tracking,
  div.email-marketing,
  div.royalty-calculator,
  div.brand-control,
  div.franchisehubtv,
  div.cloudbasedtextipad,
  div.business-analytics,
  div.tech-support,
  div.employee-management,
  div.order-management,
  div.white-label {
    display: inline-block !important;
  }
}

@media only screen and (max-width: 767px) {
  .franchise-hub-text,
  .cloud-based-text,
  .business-analytics-text,
  .tech-support-text,
  .order-management-text,
  .employee-management-text,
  .white-label-text,
  .brand-control-text,
  .lead-tracking-text,
  .custom-invoicing-text,
  .goal-setting-text,
  .customization-tools-text,
  .royalty-calculator-text,
  .email-marketing-text {
    width: 100%;
  }
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Testing</title>
  <link rel="stylesheet" href="sample.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="script/myscript.js"></script>

</head>

<body>

  <div class="product-all-contents">
    <div class="wrapper">
      <div class="product-contents">
        <div class="product" id="franchisehub">

          <p style=" font-size: 15px; font-family: 'Roboto'; margin-left: 7%; margin-right: 7%; line-height: 1.2; margin-top: 20%;
         color: rgb(58, 59, 60);">A</p>
        </div>

        <div class="product" id="cloudbasedmobile" style="background-color:#81bf44;">

          <p style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-top: 27%;
         color:white;">Z</p>
        </div>
        <div class="product" id="businessanalytics">

          <p style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-top: 22%;
         color: rgb(58, 59, 60);">B</p>
        </div>
        <div class="product" id="techsupport">

          <p style=" font-size: 15px;
         font-family: 'Roboto';
         margin-right: 9%;
         line-height: 1.2;
         margin-left: 9%; margin-top: 22%;
         color: rgb(58, 59, 60);">C</p>
        </div>

        <div class="product" id="ordermanagement">

          <p style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-top: 23%;
         color: rgb(58, 59, 60);">D</p>
        </div>

        <div class="product" id="employeemanagement">
          <p style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-left: 5%; margin-top: 27%;
         color: rgb(58, 59, 60);">E</p>
        </div>
        <div class="product" id="whitelabel">
          <p style="
         font-size: 15px;
         font-family: 'Roboto';
         line-height:1.2;
         margin-left: 14%;
         margin-right: 14%; margin-top: 8%;
         color: rgb(58, 59, 60);
         ">M</p>
        </div>
      </div>
      <div class="product-contents">
        <div class="product" id="brandcontrol">

          <p style="
         font-size: 15px;
         font-family: 'Roboto';
         margin-left: 8%;
         line-height:1.2;
         margin-right: 8%; margin-top: 20%;
         color: rgb(58, 59, 60);
         ">F</p>
        </div>
        <div class="product" id="leadtracking">

          <p style="
         font-size: 15px;
         font-family: 'Roboto';
         line-height:1.2;
         margin-left: 5%;
         margin-right: 5%; margin-top: 26%;
         color: rgb(58, 59, 60);
         ">G</p>
        </div>
        <div class="product" id="custominvoicing">

          <p style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-top: 24%;
         color: rgb(58, 59, 60);">K</p>
        </div>
        <div class="product" id="goalsetting">

          <p style="font-size: 15px;
         font-family: 'Roboto';
         margin-right: 13%;
         margin-left: 13%;
         line-height: 1.2; margin-top: 24%;
         color: rgb(58, 59, 60);">H</p>
        </div>
        <div class="product" id="customizationtools">

          <p style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-top: 22%;
         color: rgb(58, 59, 60);">I</p>
        </div>
        <div class="product" id="royaltycalculator">

          <p style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-left: 5%; margin-top: 23%;
         color: rgb(58, 59, 60);">J</p>
        </div>
        <div class="product" id="emailmarketing">

          <p style="
         font-size: 15px;
         font-family: 'Roboto';
         margin-left: 5%;
         margin-right: 5%;
         line-height:1.2; margin-top: 21%;
         color: rgb(58, 59, 60);
         ">K</p>
        </div>
      </div>
    </div>

  </div>














</body>

</html>

Upvotes: 1

Related Questions