How to horizontally scroll the contents in mobile/tablet view in html/css?

Question

I have a fiddle which I have replicated by seeing the screenshot below:

The CSS code which I have used for the individual square box item is:

.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
}

Problem Statement:

Now in the mobile view, I want the items in the screenshot to horizontally scroll in the mobile/tablet view without any change in size of an item. In order to do that, I have used the following CSS code but it doesn't seem to work.

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

I am wondering what changes I should make in the fiddle so that the whole screenshot scroll in the mobile/tablet view.

Do you want the items to still be in two rows? Or you want the to be fexible to the screens width? — Gerardo BLANCO, Jun 03 '18 at 15:34

Nikki Mather · Answer 1 · 2018-06-02T22:00:44.047

2

You're on the right tracks, but you can't use white-space: nowrap in this instance, since using that method is reserved for when you're using the inline-block method of creating a horizontal scroll. There is a flexbox property though called flex-wrap which when we set to nowrap it does a similar thing.

See updated fiddle: https://jsfiddle.net/utmyu5r6/4/

edited Jun 02 '18 at 22:00

answered Jun 02 '18 at 21:42

Nikki Mather

1,118
3
17
33

Can you update it in the fiddle ? In that way, I will be easily to visualize. – flash Jun 02 '18 at 21:43
Updated answer with Fiddle. All changes were made in the media query FYI. – Nikki Mather Jun 02 '18 at 22:01
In the [fiddle](https://jsfiddle.net/utmyu5r6/4/embedded/result/), I can see the contents moving horizontally but I can see the width of the items has changed and its not the same width as in the desktop view. Is there any way we can fixed that ? Also, I can see the white space at the right. Is there any we can avoid that ? – flash Jun 02 '18 at 23:56
For example, if you see this [website](https://thebettersoftwarecompany.com/) in the mobile view, you can see the `stripe` and `globally franchise` images present in the 2nd section moving horizontally without any change of width and height. The size remains the same but its scrolling horizontally. – flash Jun 02 '18 at 23:58
1

You have set a 10% width on desktop, which when translated to mobile looked a little odd so I changed the width but you can obviously remove that. The example you linked to works in that way because the images aren't given a width, they're just displayed at their natural size. Since you've specified you want the size to be 10%, it's always going to look odd. If i were you, I would set a `max-width` on the normal selector which will ensure the boxes look the same across all screen sizes. See this fiddle; https://jsfiddle.net/utmyu5r6/6/ – Nikki Mather Jun 03 '18 at 10:28

score 1 · Accepted Answer · answered Jun 03 '18 at 16:37

The main problem is that the items and their parents have a dinamic width. Items being on 10% and its parent to 70%.

I would recommend using the next style inside your media query. You can adapt this rule to different breakpoints as you need.

.product-contents .product{
  min-width: 25%;
  max-width: 25%; 
  margin: 0 2%;
  }

I had to remove all of the JS and some HTML to make the snippet work. Your code hit the max of SO. Hope this helps :>

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

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

.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)
{
.product-all-contents
{
   overflow-x: auto;
}

.product-contents .product{
  min-width: 25%;
  max-width: 25%; 
  margin: 0 2%;
  }
}

<!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="product-contents">
   <div class="product" id="franchisehub">
      <img class="black"  src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Franchise-Hub.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7920">
      <img class="white"  src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/franchise-hub-white.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7920">
      
   <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);">Franchise Hub</p>
   </div>
   
   <div class="product" id="cloudbasedmobile" style="background-color:#81bf44;">
      <img class="black" style="display:none;" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/cloud-grey.png" alt="" width="70" height="50" class="aligncenter size-full wp-image-8020" />
      <img class="white" style="display:inline-block;"  src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/cloud-based-mobile-white.png" alt="" width="70" height="50" class="aligncenter size-full wp-image-8020" />
      
   <p  style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-top: 27%;
         color:white;">Cloud Based & Mobile</p>
   </div>
   <div class="product" id="businessanalytics">
      <img class="black"  src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/business-analytics.png" alt="" width="53" height="53" class="aligncenter size-full wp-image-7949" /> 
      <img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/business-analytics-white.png" alt="" width="53" height="53" class="aligncenter size-full wp-image-7949" /> 
      
   <p  style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-top: 22%;
         color: rgb(58, 59, 60);">Business Analytics</p>
   </div>
   <div class="product" id="techsupport">
      <img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/tech-support.png" alt="" width="54" height="54" class="aligncenter size-full wp-image-7953" />
      <img class="white"   src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/tech-support-white.png" alt="" width="54" height="54" class="aligncenter size-full wp-image-7953" />
      
   <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);">Tech Support</p>
   </div>

   <div class="product" id="ordermanagement">
      <img class="black"  src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/order-management.png" alt="" width="43" height="52" class="aligncenter size-full wp-image-7952" /> 
      <img class="white"  src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/order-management-white.png" alt="" width="43" height="52" class="aligncenter size-full wp-image-7952" /> 
      
   <p  style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-top: 23%;
         color: rgb(58, 59, 60);">Order Management</p>
   </div>
   
   <div class="product" id="employeemanagement">
      <img class="black"  src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/employee-management.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7920">
      <img class="white"   src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/employee-management-white.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7920">
      <p  style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-left: 5%; margin-top: 27%;
         color: rgb(58, 59, 60);">Employee Management</p>
   </div>
   <div class="product" id="whitelabel">
      <img class="black"  src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/white-label.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7920">
      <img class="white"  src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/white-label-white.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7920">
      <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);
         ">White Label</p>
   </div>
</div>
<div class="product-contents">
   <div class="product" id="brandcontrol">
      <img class="black"   src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/brand-control.png" alt="" width="57" height="57" class="aligncenter size-full wp-image-7956" />
      <img class="white"  src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/brand-control-white.png" alt="" width="57" height="57" class="aligncenter size-full wp-image-7956" />
      
   <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);
         ">Brand Control</p>
   </div>
   <div class="product" id="leadtracking">
      <img class="black"  src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/lead-tracking.png" alt="" width="50" height="50" class="aligncenter size-full wp-image-7957" />  
      <img class="white"   src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/lead-tracking-white.png" alt="" width="50" height="50" class="aligncenter size-full wp-image-7957" />  
      
   <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);
         ">Lead Tracking &amp; CRM</p>
   </div>
   <div class="product" id="custominvoicing">
      <img class="black"  src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/custom-invoicing.png" alt="" width="51" height="50" class="aligncenter size-full wp-image-7958" /> 
      <img class="white"  src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/custom-invoicing-white.png" alt="" width="51" height="50" class="aligncenter size-full wp-image-7958" /> 
      
   <p  style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-top: 24%;
         color: rgb(58, 59, 60);">Custom Invoicing</p>
   </div>
   <div class="product" id="goalsetting">
      <img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/goal-setting.png" alt="" width="50" height="51" class="aligncenter size-full wp-image-7959" /> 
      <img class="white"  src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/goal-setting-white.png" alt="" width="50" height="51" class="aligncenter size-full wp-image-7959" /> 
      
   <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);">Goal Setting</p>
   </div>
   <div class="product" id="customizationtools">
      <img class="black"  src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/customization-tools.png" alt="" width="54" height="53" class="aligncenter size-full wp-image-7960" />
      <img class="white"  src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/customization-tools-white.png" alt="" width="54" height="53" class="aligncenter size-full wp-image-7960" />
      
   <p  style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-top: 22%;
         color: rgb(58, 59, 60);">Customization Tools</p>
   </div>
   <div class="product" id="royaltycalculator">
      <img class="black"  src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/royalty-calculator.png" alt="" width="50" height="51" class="aligncenter size-full wp-image-7961" />
      <img class="white"  src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/royalty-calculator-white.png" alt="" width="50" height="51" class="aligncenter size-full wp-image-7961" />
      
   <p  style=" font-size: 15px;
         font-family: 'Roboto';line-height:1.2; margin-left: 5%; margin-top: 23%;
         color: rgb(58, 59, 60);">Royalty Calculator</p>
   </div>
   <div class="product" id="emailmarketing">
      <img class="black"  src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/email-marketing.png" alt="" width="51" height="52" class="aligncenter size-full wp-image-7962" />   
      <img class="white"  src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/email-marketing-white.png" alt="" width="51" height="52" class="aligncenter size-full wp-image-7962" />   
      
   <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);
         ">Email Marketing</p>
   </div>
</div>
</div>
<div class="arrow-down"></div>
<div class="franchisehubtv" style="display:none;">
   <div class="franchise-hub-text">
      <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/franchise-hub-green.png" alt="" width="53" height="53" style="margin-bottom:5%;">   
      <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Franchise Hub</h6>
      <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
      <div class="product-quotes">
   <p>Franchise management hubs allow you to support your entire franchise network efficiently and transparently. Branding, invoicing, royalties, products and services, are organized by corporate, and then funneled down through the network as desired.
      </p>
   <a href="https://thebettersoftwarecompany.com/franchise-management-hub/" style="float:right;">Learn More</a>
   </div>
   </div>
   <div class="tvs">
      <div class="tv">
         <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Franchise-Hub-1.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
      </div>
      
   </div>
</div>

<div class="cloudbasedtextipad" style="display:flex;">
   <div class="cloud-based-text">
      <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/cloud-based-mobile-green.png" alt="" width="53" height="53" style="margin-bottom:10%;">
      <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Cloud Based &amp; Mobile</h6>
      <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
      <div class="product-quotes">
   <p>We’re cloud based and mobile first, which means you can access everything you need, no matter where you are. The app lets you run your business without compromising any features or power, so employees are able to check in from worksites and stay up to date.
      </p>
   <a style="float:right;">Learn More</a>
   </div>
   </div>
   <div class="tvs">
      
      <div class="tv">
         <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Cloud-Based-Mobile.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
      </div>
   </div>
</div>

<div class="business-analytics" style="display:none;">
   <div class="business-analytics-text">
      <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/business-analytics-green.png" alt="" width="53" height="53" style="margin-bottom:9%;">
      <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Business Analytics</h6>
      <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
      <div class="product-quotes">
   <p>Our business analytics and reports let you see real-time information on everything from hours worked to open orders and payments accepted. All your important daily figures, at a glance.
      </p>
   <a href="https://thebettersoftwarecompany.com/business-analytics/" style="float:right;">Learn More</a>
   </div>
   </div>
   <div class="tvs">
      <div class="tv">
         <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Business-Anylitics.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
      </div>
      
   </div>
</div>

<div class="tech-support" style="display:none;">
   <div class="tech-support-text">
       <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/tech-support-green.png" alt="" width="53" height="53" style="margin-bottom:13%;">
       <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Tech Support</h6>
       <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
       <div class="product-quotes">
    <p>Whether you, any of your franchisees, or their staff ever need help with BPro software, our support team is a quick online chat, email, or phone call away.
      </p>
    <a style="float:right;">Learn More</a>
   </div>
   </div>
   <div class="tvs">
      <div class="tv">
         <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tech-Support.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
      </div>
      
   </div>
</div>


<div class="order-management" style="display:none;">
   <div class="order-management-text">
      <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/order-management-green.png" alt="" width="53" height="53" style="margin-bottom:11%;">
      <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Order Management</h6>
      <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
      <div class="product-quotes">
   <p>Control your sales pipeline with our customizable and consistent order management system. Reference current orders, create new ones, duplicate existing orders and more.
      </p>
    <a href="https://thebettersoftwarecompany.com/order-management-software/" style="float:right;">Learn More</a>
    </div>
   </div>
   <div class="tvs">
      <div class="tv">
         <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Order-Managment.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
      </div>
      
   </div>
</div>

<div class="employee-management" style="display:none;">
   <div class="employee-management-text">
      <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/employee-management-green.png" alt="" width="53" height="53" style="margin-bottom:11%;">
      <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Employee Managment</h6>
      <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
      <div class="product-quotes">
   <p>Simplify your human resources and keep track of important details like employee start dates, birthdays, and payroll, all while being able to keep track of where and when everyone is being most effective. 
      </p>
    <a href= "https://thebettersoftwarecompany.com/employee-management/" style="float:right;">Learn More</a>
    </div>
   </div>
   <div class="tvs">
      <div class="tv">
         <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Employee-Managment.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
      </div>
      
   </div>
</div>

<div class="white-label" style="display:none;">
   <div class="white-label-text">
      <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/white-label-green.png" alt="" width="53" height="53" style="margin-bottom:10%;">
      <h6 style="color:black;font-family:'Roboto';font-weight:normal;">White Label</h6>
      <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
      <div class="product-quotes">
   <p>Sure, we made BPro, but we want it to really be your business software. Your templates, your colours, your logo, your language.
      </p>
    <a style="float:right;">Learn More</a>
    </div>
   </div>
   <div class="tvs">
      <div class="tv">
         <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Brand-Control.png" alt="" width="450" height="450"class="aligncenter size-full wp-image-8081">
      </div>
      
   </div>
</div>


<div class="brand-control" style="display:none;">
   <div class="brand-control-text">
      <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/brand-control-green.png" alt="" width="53" height="53" style="margin-bottom:9%;">
      <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Brand Control</h6>
      <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
      <div class="product-quotes">
   <p >Control your brand across all locations, even internationally with our customizable templates, logo, language and branded colour options. No two locations will ever generate different invoices ever again (unless you want them to).
      </p>
   <a style="float:right;">Learn More</a>
   </div>
   </div>
   <div class="tvs">
      <div class="tv">
         <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Brand-Control.png" alt=""width="450" height="450" class="aligncenter size-full wp-image-8081">
      </div>
      
   </div>
</div>




<div class="lead-tracking" style="display:none;">
   <div class="lead-tracking-text">
      <img id="lead-tracking" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/lead-tracking-green.png" alt="" width="53" height="53" style="margin-bottom:9%;">
      <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Lead Tracking & CRM</h6>
      <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
   <div class="product-quotes">
   <p>Take your sales and customer service to the next level with a customer relationship manager designed specifically with franchises and multi-location businesses in mind. Featuring automation, filtering and more.
      </p>
   <a style="float:right;">Learn More</a>
   </div>
   </div>
   <div class="tvs">
      <div class="tv">
         <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Lead-Tracking-1.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
      </div>
      
   </div>
</div>

<div class="custom-invoicing" style="display:none;">
    <div class="custom-invoicing-text">
   <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/custom-invoicing-green.png" alt="" width="53" height="53" style="margin-bottom:13%;">
      <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Custom Invoicing</h6>
      <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
    <div class="product-quotes">
   <p>Our custom invoicing lets you create consistent, professional and personalized invoices that link directly to a payment processing system.
      </p>
    <a style="float:right;">Learn More</a>
 </div>
   </div>
   <div class="tvs">
      <div class="tv">
         <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Custom-Invoicing.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
      </div>
      
   </div>
</div>

<div class="goal-setting" style="display:none;">
   <div class="goal-setting-text">
      <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/goal-setting-green.png" alt="" width="53" height="53" style="margin-bottom:13%;">
      <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Goal Setting</h6>
      <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
      <div class="product-quotes">
   <p>Goals are important! Make sure they’re communicated throughout your franchise network with our goal setting tool. Different goals for different locations or hubs? No problem.
      </p>
    <a style="float:right;">Learn More</a>
    </div>
   </div>
   <div class="tvs">
      <div class="tv">
         <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Goal-Setting.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
      </div>
      
   </div>
</div>

<div class="customization-tools" style="display:none;">
   <div class="customization-tools-text">
      <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/customization-tools-green.png" alt="" width="53" height="53" style="margin-bottom:13%;">
      <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Customization Tools</h6>
      <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
      <div class="product-quotes">
   <p>Flexibility to customize your software including the addition of your logo, brand colours, language, and so much more. Your business, your software.
      </p>
   <a style="float:right;">Learn More</a>
  </div> 
   </div>
   <div class="tvs">
      <div class="tv">
         <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Customization-Tools.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
      </div>
      
   </div>
</div>

<div class="royalty-calculator" style="display:none;">
   <div class="royalty-calculator-text">
      <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/royalty-calculator-green.png" alt="" width="53" height="53" style="margin-bottom:4%;">
      <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Royalty Calculator</h6>
      <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
    <div class="product-quotes">
   <p>No more complicated calculations when it comes to royalties. With our royalty calculator, you can set unique royalty rules for each location, or apply the same template across the board. Ensure consistency every billing period with the same system, and confirm numbers with our royalty reports.
      </p>
   <a href="https://thebettersoftwarecompany.com/franchise-royalty-calculator/" style="float:right;">Learn More</a>
 </div>
   </div>
   <div class="tvs">
      <div class="tv">
         <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Royalties.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
      </div>
      
   </div>
</div>

<div class="email-marketing" style="display:none;">
   <div class="email-marketing-text">
      <img  src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/email-marketing-green.png" alt="" width="53" height="53" style="margin-bottom:4%;">
      <h6 style="color:black;font-family:'Roboto';font-weight:normal;">Email Marketing</h6>
      <p style="font-family: 'Roboto'; font-weight: normal;color:#929397; margin-bottom:2.3%;">Software that works the way you do</p>
   <div class="product-quotes">
   <p> With a franchise or multi-location business, we know you don’t always want all customers to be connected to the same email campaign, that’s why we established an integration with Emma. Keep things running with automated campaigns and customer info pushes from BPro to Emma.
      </p>
   <a style="float:right;">Learn More</a>
   </div>
   </div>

</div>
</body>
</html>

Thanks for the help. It did work. I have one last question which is related to the mobile view. In this [fiddle](https://jsfiddle.net/8wzgsobz/embedded/result/) I am seeing all the description boxes getting displayed at the bottom without any product item being clicked. In the desktop view, its working perfectly fine but in the mobile view all are getting displayed. Is there we can avoid that ? I have a feeling the reason behind it is that I am using `display:inline-block !important` in media queries which is overriding `display:none` in the mobile view. — flash, Jun 04 '18 at 04:13
In the mobile view, it should work in a way when one item gets clicked, the description box related to that gets displayed at the bottom and vice-versa with others. But in the current [fiddle](https://jsfiddle.net/8wzgsobz/embedded/result/), all are getting displayed. — flash, Jun 04 '18 at 06:49
Indeed your problem is at the media query. You should remove that display:inline-block — Gerardo BLANCO, Jun 04 '18 at 12:28
Yes, I have removed the `display:inline-block` and have placed `flex-direction: column;` in order to pile the items vertically. — flash, Jun 04 '18 at 15:05
Also, for the scroll solution which you have provided me above, is there any way we can include a side arrow to show more can be scrolled through so people know they exist ? Something like scrolling bar ? — flash, Jun 04 '18 at 15:09
Yes you could add an arrow and make it as a slider. In a personal opinion, I would make a menu based on the icons only. I dont like users having to move things horizontally — Gerardo BLANCO, Jun 04 '18 at 15:38
I agree with you on that but I have to scroll it horizontally as it is the requirement from the upper level. I am wondering if you can give me some pointer regarding the arrow and the slider. Here is the [fiddle](https://jsfiddle.net/8wzgsobz/embedded/result/) with your solution. — flash, Jun 04 '18 at 15:41
I think best solution will be jQuery, ``scrollLeft()`` and ``scrollRight()``. You should add a new question so I, and others can help. Or if you prefer I can help you via skype.email — Gerardo BLANCO, Jun 04 '18 at 16:26
I have posted a [question](https://stackoverflow.com/questions/50730862/how-to-scroll-the-content-in-the-left-and-right-direction-on-hitting-an-arrow) I am wondering if you can help me out. — flash, Jun 07 '18 at 00:58

How to horizontally scroll the contents in mobile/tablet view in html/css?

2 Answers2

Linked