How to horizontally scroll the contents in mobile/tablet view in html/css?
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="Sample Image" 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="Sample Image" 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="Sample Image" 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="Sample Image" 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="Sample Image" 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="Sample Image" 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="Sample Image" 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="Sample Image" 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="Sample Image" 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="Sample Image" 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="Sample Image" 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="Sample Image" 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="Sample Image" 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="Sample Image" 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="Sample Image" 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="Sample Image" 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="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Royalties.png" alt="Sample Image" 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="Sample Image" 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>How to make the squares scroll in a row in a mobile view in html/css?
- 1) You need to set
overflow-xto.product-contentsso that it shows
scroll on smaller screen - 2) Set
min-widthto.productso that it will not get smaller on small
device - 3) Using
:notselector in.product, setmargin-rightso that space
between each item will remain - 4) Remove
white-spacefrom the.product-all-contentsin@media onlyas there is no need of it now
screen and (max-width: 767px)
.product-contents {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
overflow-x: auto;
}
.product-contents .product {
width: 10%;
min-width: 90px;
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
}
.product-contents .product:not(:last-child) {
margin-right: 15px;
}
.product-contents .product img {
max-width: 100%;
}
@media only screen and (max-width: 767px)
{
.product-all-contents
{
overflow-x: auto;
}
}<div class="product-all-contents">
<div class="product-contents">
<div class="product"><img src="http://via.placeholder.com/150x150" alt="Sample Image" /></div>
<div class="product"><img src="http://via.placeholder.com/150x150" alt="Sample Image" /></div>
<div class="product"><img src="http://via.placeholder.com/150x150" alt="Sample Image" /></div>
<div class="product"><img src="http://via.placeholder.com/150x150" alt="Sample Image" /></div>
<div class="product"><img src="http://via.placeholder.com/150x150" alt="Sample Image" /></div>
<div class="product"><img src="http://via.placeholder.com/150x150" alt="Sample Image" /></div>
<div class="product"><img src="http://via.placeholder.com/150x150" alt="Sample Image" /></div>
<div class="product"><img src="http://via.placeholder.com/150x150" alt="Sample Image" /></div>
</div>
<div class="product-contents">
<div class="product"><img src="http://via.placeholder.com/150x150" alt="Sample Image" /></div>
<div class="product"><img src="http://via.placeholder.com/150x150" alt="Sample Image" /></div>
<div class="product"><img src="http://via.placeholder.com/150x150" alt="Sample Image" /></div>
<div class="product"><img src="http://via.placeholder.com/150x150" alt="Sample Image" /></div>
<div class="product"><img src="http://via.placeholder.com/150x150" alt="Sample Image" /></div>
<div class="product"><img src="http://via.placeholder.com/150x150" alt="Sample Image" /></div>
<div class="product"><img src="http://via.placeholder.com/150x150" alt="Sample Image" /></div>
<div class="product"><img src="http://via.placeholder.com/150x150" alt="Sample Image" /></div>
</div>
</div>Horizontal scroll on overflow of table
I think your overflow should be on the outer container. You can also explicitly set a min width for the columns. Like this:
.search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }
Fiddle: http://jsfiddle.net/5WsEt/
Avoiding horizontal scroll in desktop view in html/css
Use media queries to change your CSS to include overflow-x:hidden, instead of overflow-x:auto
EDIT:
You want this...
@media screen and(min-width:769px) {
.squares {
overflow-x:hidden;
}
}
That targets anything over tablet size (but not a portrait ipad), hope this helps.
How to avoid horizontal scroll on mobile web with responsive web design?
Check all the paddings. If you add padding to something with width set to 100% it will go outside the parent.
Shown here
http://jsfiddle.net/wzZ3W/
Code
<div id="fillX">
<div id="childXFill">
</div>
</div>
#fillX
{
background:red;
width:100%;
opacity:0.5;
}
#childXFill
{
background:blue;
width:100%;
padding:10px;
opacity:0.5;
}
Also check negative left and right margins on elements that span the page. E.g. http://jsfiddle.net/s7zrukj2/2/
Also, use a CSS Reset.
If you wan't to use overflow: hidden you should probably set it on the body element too. Like so
body, html { overflow-x:hidden; }
Although the fact that something is overflowing indicates an error in your responsive design and you should try and fix it instead to prevent something not being visible to a mobile user.
How to scroll the content in the left and right direction on hitting an arrow in mobile view?
For your problem you need a few things
- Set two buttons to set the listeners in your code
Get the initial position so you can calculate the slide
let divMain = $('.product-all-contents')[0];
let position = $(divMain).children().position().left;
const slideAmount = 150;
This 3 variables will be the main values for the code
Last make the listenes for the slide
$('#arrow-right').click(function() {
$(divMain).animate({
scrollLeft: position + slideAmount
}, 500);
position += slideAmount;
})
Hope this helps :>
$(document).ready(function() {
let divMain = $('.product-all-contents')[0];
let position = $(divMain).children().position().left;
const slideAmount = 150;
$('#arrow-right').click(function() {
$(divMain).animate({
scrollLeft: position + slideAmount
}, 500);
position += slideAmount;
})
$('#arrow-left').click(function() {
$(divMain).animate({
scrollLeft: position - slideAmount
}, 500);
position -= slideAmount;
})
});.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: 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="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>
<button id="arrow-left"><----</button>
<button id="arrow-right">----></button>
</body>
</html>Make scrollbar visible in mobile browsers
Try adding the below to your CSS, note that this is webkit specific:
Demo Fiddle
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
Related Topics
What Does the Clearfix Class Do in CSS
How to Calculate Required Hue-Rotate to Generate Specific Colour
Remove ':Hover' CSS Behavior from Element
How to Strike Through Obliquely with CSS
How to Set the Thumbnail Image on HTML5 Video
Bash Script to Convert from HTML Entities to Characters
Vertically Centering a Div in Body
Making a Custom Input Text Type
Html/CSS Hack to Allow Overflow-X: Auto & Overflow-Y: Visible
How to Make Child Divs Use All Available Space When One Makes the Container Scroll
Customise Ng Bootstrap Carousel in Angular
Z-Index Without Absolute Position
Css: Why Background-Color Breaks/Removes the Box-Shadow
Thymeleaf - How to Apply Two (Or More) Styles Based on Mutually Exclusive Conditions
How to Append Leading Zero's to an Ordered Number List? (01 or 001 as Opposed to Just 1)