Ways to create a responsive design for this specific part of the

https://i.sstatic.net/2JyyN.jpg

Hello everyone, I'm looking to make this section responsive at 768px

.AppleContent {
    background-color: #9ACD32;
    text-align: center;
    padding: 50px 200px;
    color: white;
}
<section class="section-1">
        <div class="AppleContent">
            <i class="fas fa-apple-alt fa-3x"></i>
            <h3 class="font-weight">Completely synergize resource taxing relationships</h3>
            <p id="secondparagraph">Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.</p>
        </div>
</section>

htmlcssresponsive-designbootstrap-4

Answer №1

When setting absolute values for padding like padding: 50px 200px;, the content may appear distorted on smaller screens;

To achieve the desired look, consider using relative values instead of absolutes. For example, using percentages like padding: 5% 10%; or as shown below (relative to view height and view width)...

See the code snippet below

.AppleContent {
  background-color: #9ACD32;
  text-align: center;
  padding: 10vh 20vw;
  color: white;
}
<section class="section-1">
  <div class="AppleContent">
    <i class="fas fa-apple-alt fa-3x"></i>
    <h3 class="font-weight">Completely synergize resource taxing relationships</h3>
    <p id="secondparagraph">Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.</p>
  </div>
</section>

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

Show singular array element upon click

I need help with a specific task. When a button is clicked, I want to display a random item from an array. Each array item should only be displayed once. Currently, my code is set up as follows: When the button is clicked, a random array item is displ ...

javascriptjqueryhtmlcssarrays

What are the best practices for maximizing the efficiency of bootstrap-sass?

Currently, I am exploring npm modules and came across bootstrap-sass. After downloading the modules, I was seeking a solution to compile scss into the static folder of my application, as well as the js bootstrap files. However, after checking the npmjs do ...

cssnode.jstwitter-bootstrapnpmsass

Tips on automating clicking the cookie button using Selenium?

Currently, I am attempting to extract data from the following website. I need to access various subpages, but some of them are hidden behind a "load more" button. I decided to use Selenium to click the button, but I am encountering difficulty with getting ...

pythonhtmlselenium-webdriverweb-scraping

Streamline your processes by automating jQuery AJAX forms

I am looking to automate a click function using the code snippet below in order to directly submit form votes. Is there a method to develop a standalone script that can submit the votes without requiring a webpage refresh: <input type="submit" id="edit ...

javascriptjqueryhtmlajaxforms

React - CSS Transition resembling a flip of a book page

As I delve into more advanced topics in my journey of learning React and Front Web Dev, I discovered the ReactCSSTransitionGroup but learned that it is no longer maintained so we now use CSSTransitionGroup. I decided to create a small side project to expe ...

javascriptreactjscsscss-transitionsreactcsstransitiongroup

Display the data count of a filtered list in Vue 2

As a newcomer to Vue, I am facing what seems like a simple and common task but the solution is escaping me. I need to filter some data and then display the count in a component. This is the HTML structure: <main class="container-fluid"> <div ...

javascriptvue.jsbootstrap-4vuejs2vue-component

Launch a Firebase app with a custom .com web address

Just starting out in the world of hosting. I have a project that involves: Front end: HTML, CSS, JQuery Back end: Firebase Currently, I am using Firebase to store user data on my website. My goal is to host the site as abc.com However, when I contacted ...

htmlfirebasewebhostingfirebase-hosting

Updated: "Adjust the preserveAspectRatio attribute in the SVG element within the Lottie player"

I have successfully incorporated a lottie json file using the lottie player. Unfortunately, I do not have access to the SVG file itself, only the json file. My goal is to modify the preserveaspectratio attribute of the SVG to xMinYMax meet instead of xMi ...

javascripthtmllottie

Encountering issues with implementing useStyles in Material-UI components

Currently, I am working on a project utilizing Material-UI's library and encountering styling issues. This project marks my initial venture into ReactJS and JavaScript in general. Therefore, any assistance would be greatly appreciated! I am struggli ...

cssreactjsmaterial-ui

Why does my element appear to be a different color than expected?

I've developed a sleek wind map (check out for reference). Using a weighted interpolation every 10ms, I generate uVector and vVector data to calculate wind speed. Based on this speed, each point is assigned a specific color as outlined below. if (we ...

javascripthtmlcolorshtml5-canvasline

Duplicate a form based on the selected option

My goal is to duplicate a form based on the numerical value selected from the drop-down menu. You can find the corresponding code in this JSFiddle. Here is the HTML code: <div class="travel_tour-info"> <h3>How many people are you booking for? ...

javascriptjqueryhtml

A guide to accessing files and displaying their content by utilizing button clicks in PHP

Is it possible to navigate through the files in a folder by using buttons like Next and Previous, and then display the file contents within a table cell? Below is my attempted output, which unfortunately isn't functioning as expected: View Sample Ou ...

phparrayshtmlcsslaravel-5.3

Foundation 4 Framework: Mastering the Art of Clearing CSS Floats

I'm currently in the process of developing a website, but I am facing difficulties with clearing the floats. My website is built using the foundation 4 framework. Whenever I apply the .columns class to an element, it causes the elements to float left. ...

csscss-floatzurb-foundation

I'm encountering difficulties with customizing the root styling of material-ui's DialogActions

Check out the two buttons in a DialogActions just like this. This is the JSX snippet I'm working with: <DialogActions classes={{ root: classes.dialogActionsLeft }}> <Button autoFocus onClick={() => { setOpen(false); }} ...

cssreactjsmaterial-ui

Tips for properly aligning an image within an HTML iframe

I've been working on positioning an image inside an iframe, but so far my research hasn't yielded the results I need. Here's what my code looks like: The HTML <div class="modal-body description"> <div class="modal ...

htmlcssiframeposition

Contrast in spacing: comparing display block versus inline-block

Today, I stumbled upon something quite intriguing that has left me puzzled. Consider the following HTML: <div class="a"><div class="b"></div></div> And CSS: .a { background: blue; } .b { display:inline-block; height ...

htmlcsslayout

What is the process for displaying the current bitcoin price on an HTML page using API integration?

I'm looking to develop an application that can display the current Bitcoin price by fetching data from the API at . I want to showcase this information within an h2 element. Any suggestions on how I could achieve this? Thank you in advance. const e ...

javascripthtmlapiexpressbitcoin

Error: The object #<HTMLCollection> does not support the 'tags' method

While trying to troubleshoot this issue, it seems like I haven't been able to pinpoint the simple solution. This particular javascript menu works perfectly in IE, however in Chrome, there is an error when trying to open the menu with a first-level cli ...

javascripthtml

Creating a mobile-friendly layout with 3 columns: Tips and tricks

I attempted to solve the issue independently but didn't have much success. My goal is to create a proper version for mobile users using bootstrap, however, it currently looks terrible on mobile devices. I suspect the problem lies with the div classes ...

htmltwitter-bootstrapcssmobile

Concealing Images in HTML Without Reserving Space for Them

Our task is to create a website here: I tried hiding elements using display: none; However, I ended up with a large blank space. https://i.sstatic.net/B2E8Y.jpg This is the HTML code: <h1>OUR PORTFOLIO</h1><div class="subtext-top"& ...

jqueryhtmlcss