Implementing mobile view padding using CSS

Recently, I encountered a dilemma with a code snippet in my project. When viewed on mobile devices, the square boxes within the design would horizontally scroll.

Below are the CSS snippets responsible for this behavior:

@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%;
  }
}



The Issue at Hand:

I'm currently seeking advice on how to modify the CSS code within the fiddle in order to achieve a satisfactory level of padding on the extreme right side in mobile view, similar to the screenshot attached below. As it stands now, there seems to be no visible padding on the far right within the fiddle.

https://i.sstatic.net/hhrGx.jpg

htmlcsspadding

Answer №1

When the overflow is set, elements tend to take up padding space, creating an issue.

The solution involves introducing another wrapper. In this case, a div with the class "wrapper" was added for setting the overflow while keeping the padding on the 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;
}
...

<!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>
    </div>
  </div>
</body>
</html>

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

By default, the text area element in Vue or Nuxt will send a message to the console

Every time I include a textarea html element in my Vue/cli or Nuxt projects, this message appears in the console. Is there a way to prevent this message from showing up in the console? <textarea rows="5" cols="33"> This is a textarea. < ...

javascripthtmlvue.jsdom-eventsnuxt.js

Display a smaller image preview in the product photo gallery

Hey there! I'm currently working on a website and looking to showcase my product in a similar way as shown here: I would like my main image to be displayed with all the other variants of the product image underneath, along with the same visual effect ...

javascriptjqueryhtmlcssangularjs

Can we modify the cell width in knitr and pandoc?

When generating an HTML file using knitr/pandoc to display multiple tables in a loop, how can you ensure that each table has the same total width despite having varying numbers of cells? --- output: html_document: theme: cosmo --- {r results ="asis", e ...

htmlcssrknitr

What is the best way to make just the background image transparent using HTML and CSS?

Hey there! I'm trying to make just the background image transparent, while leaving everything else non-transparent. Is this possible with Bootstrap? Here's a snippet of my HTML: HTML Section: <!-- Homepage Section --> <section id= ...

htmlcsstwitter-bootstrapbackgroundopacity

Displaying errors above the table. Executing ng-repeat in AngularJS

I've been struggling with a seemingly simple issue for hours now. I have a table displaying equipment rows using ng-repeat and input controls, and I want to display validation errors above the table. Here's what I tried: <div class="col-xs- ...

javascripthtmlangularjsangularjs-ng-repeat

My ejs template in express.js is failing to display my HTML content

I am currently using Express.js along with EJS to display the response received from a database query in the form of an unordered HTML list. Additionally, I have integrated json2html within my project. Despite not encountering any errors, I seem to be faci ...

javascripthtmlexpressejsjson2html

React CSS Modules - Adding styles to individual child elements

I'm having difficulty applying CSS styles to each child of a specific tag. I am using CSS modules in conjunction with semantic-ui-react: character.module.css .Character > GridColumn { border: solid 4px red; } character.js import React, {Com ...

cssreactjssemantic-ui-reactcss-modulesreact-css-modules

Can a menu with data-toggle='dropdown' remain visible even after clicking on it?

I have a dropdown menu that I created with the use of data-toggle='dropdown'. Everything seems to be working fine as the buttons close the menu upon clicking, except I would like the gray button (as shown below) to keep the menu open. https://i. ...

javascripthtmltwitter-bootstrapbootstrap-4

Designing CSS for devices with specific aspect ratios below a defined threshold

My mind is malfunctioning. Is there a way to target devices with a device aspect ratio less than 16/9, meaning wider than 16/9? I can't seem to get this code working correctly. This is specifically for portrait mode within an iOS/Android cordova app ...

cssmedia-queries

Is there a way to format wrapped lines with indentation in an unordered list?

Is there a way to indent the wrapped lines of text in an unordered list? The current layout is not quite what I want, as shown in the first image below. Ideally, I would like it to look more like the second image. I attempted to use margin-left: 56px; and ...

javascriptjqueryhtmlcssword-wrap

Is there a way to access a CSV file containing a comprehensive list of days and months?

I am in the process of designing a booking form for a website, and the client has specified that they prefer a drop-down menu for selecting dates rather than a traditional calendar. To achieve this, I plan to utilize gravity forms. For the date options, I ...

html

Is there a way to add text to a slanted comic panel using CSS?

I am currently working on a project to practice designing comic layouts, and I would like to create a section of the page that resembles a comic panel. By using transform: skew(10deg);, I have successfully skewed the panel, and I can reverse the skew for ...

htmlcsstextlayoutresponsive-design

In Vue.js, dynamically rearrange the order of items in an Array and reflect that reordering in the Document Object Model

Within a Vue component, I have an Array named "block" that contains 4 values. These values are displayed in the DOM using a v-for directive: <div class="block" @click="shuffleArray()"> <div v-for="(number, index) in block"> <spa ...

javascriptcssvue.jsvuejs2vue-component

Attempted everything... Clicking away but a div refuses to show up post-click, resulting in an error message

When attempting to click a button, I encountered an error stating that the element is not clickable at point (1333, 75) as another element would receive the click. This issue arose while using Google Chrome version 65. <li class="slds-dropdown-trigge ...

javahtmlselenium

Should we eliminate the overflow from multiple divs in the container, rather than just hiding it, or should we limit the overflow to

Looking for a solution to create a background that adjusts the number of square divs based on the size of the container, which changes when resizing the window. I tried referencing examples from this post here to add the divs. However, the issue arises wh ...

javascripthtmljquerycss

When the loop is malfunctioning due to a certain condition

what happens if the condition in the controller file is not executed during runtime... ...

javascripthtmlnode.jsmongodb

Tips for linking newly generated elements post-page rendering to events using jQuery?

Utilizing Jquery to insert <select> elements into a <div>. These <select> elements should trigger a change() event with a specific class (e.g. <select class="trigger"> -> $(.trigger).change(...)). The issue arises when adding t ...

jqueryhtml

Is there a way to delete a wrapper (parent element) in Angular without deleting the child element as well?

The solution provided in this answer on Stack Overflow addresses jQuery and not Angular or TypeScript. My inquiry bears resemblance to this question raised on a forum, but I am specifically looking for a resolution within the context of Angular. Is there ...

htmlangulartypescriptdomdom-manipulation

Adding checkboxes to a list within HTML/Django: A step-by-step guide

I am currently working on a django/html project where I need to allow users to delete multiple rows in a data table. To achieve this, I've decided to implement checkboxes within a list. For each item, I can add: <tr> <td><input type=" ...

htmldjangocheckboxlist

How to effectively extend the window.onload event handling function?

I've encountered a scenario where I need to incorporate my function, foo, into the existing window.onload event. However, there is already another function called bar assigned to the window.onload. Unfortunately, I don't have access to modify how ...

jqueryhtml