Link to code: https://jsfiddle.net/z4udfg3o/
My goal is to center the "caixa" divs within the "produtos" div. Initially, I achieved this by using exact values with margin-left. However, I now want it to be responsive across different screen sizes, so I have set both margin-left and margin-right to auto.
Here is an image depicting the desired layout:
h1 {
font-size: 2em;
color: #333;
text-align: center;
}
p {
line-height: 1.5;
margin-bottom: 1em;
}<h1>Heading</h1>
<p>Paragraph text goes here.</p>Here's the CSS code you can use:
.products {
width: 100%;
background-color: gray;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
.box {
width: 27.1%;
height: 250px;
background-color: darksalmon;
border: 1px solid #000;
float: left;
margin: 0 3%;
}
Do you Like This?
.produtos {
width: 100%;
height: 252px;
background: gray;
text-align: center;
}
.caixa {
width: 250px;
height: 250px;
background: darksalmon;
border: 1px solid #000;
margin: 0 auto;
}<div class="produtos">
<div class="caixa">
<img src="imagens/croa.png" style="margin-left:60px;">
<p style="text-align:center;">Temos os melhores produtos do mercado! Nossos competidores ajoelham-se perante a nossa qualidade!</p>
</div>
<div class="caixa">
<img src="imagens/dinheiro.png" style="margin-left:60px;">
<p style="text-align:center;">Preços mais baratos do mercado! Promoções 24/7! Se houver ofertas mais baratas diga e fazemos promoção de 0.01€!</p>
</div>
<div class="caixa">
<img href="#" src="imagens/definicoes.png" style="margin-left:60px;">
<p style="text-align:center;">Nosso departamento de apoio ao cliente está ativo 24/7! Resolveremos todas as suas dúvidas!</p>
</div>
</div>If not, I recommend checking out flexbox
To achieve this, follow the steps outlined below:
#container {
background-color: #f1f1f1;
padding: 5px;
text-align: center;
width:100%;
}
#box1, #box2, #box3 {
background-color: #ddd;
display: inline-block;
padding: 25px;
width:30%;
}<div id="wrap">
<div id="box1">Content in Box 1</div>
<div id="box2">Content in Box 2</div>
<div id="box3">Content in Box 3</div>
</div>Consider adjusting your CSS code as shown below:
.items
{
width: 100%;
height: 252px;
background-color: gray;
text-align: center;
}
.box
{
width: 250px;
height: 250px;
background-color: darksalmon;
border: 1px solid #000;
display: inline-block;
}
The orange boxes in the following code are set to display: inline-block, allowing them to flow with the text alignment of center in their parent container. This responsive design ensure that the boxes adapt to the available screen space, appearing side by side on wide screens and vertically stacked on smaller ones.
To eliminate unwanted margins caused by newlines between the boxes, I made some modifications to the HTML structure.
.produtos
{
width: 100%;
background: gray;
text-align: center;
}
.caixa
{
vertical-align: top;
width: 250px;
height: 250px;
background: darksalmon;
border: 1px solid #000;
display: inline-block;
}<div class="produtos">
<div class="caixa">
<img src="imagens/croa.png" style="margin-left:60px;">
<p style="text-align:center;">Temos os melhores produtos do mercado! Nossos competidores ajoelham-se perante a nossa qualidade!</p>
</div
><div class="caixa">
<img src="imagens/dinheiro.png" style="margin-left:60px;">
<p style="text-align:center;">Preços mais baratos do mercado! Promoções 24/7! Se houver ofertas mais baratas diga e fazemos promoção de 0.01€!</p>
</div
><div class="caixa">
<img href="#" src="imagens/definicoes.png" style="margin-left:60px;">
<p style="text-align:center;">Nosso departamento de apoio ao cliente está ativo 24/7! Resolveremos todas as suas dúvidas!</p>
</div>
</div>I trust it will be beneficial for you. I included a row div class for each one so that you can adjust the padding in the highlighted text class row.
.produtos
{
width: 100%;
height: 252px;
}
.caixa
{
width: 33%;
height: 100%;
background: darksalmon;
border:1px solid red;
float: left;
}
.row{
height:100%;
padding:0 20px;
}<div class="produtos">
<div class="caixa">
<div class="row">
<img src="imagens/croa.png">
<p style="text-align:center;">We have the best products on the market! Our competitors bow down to our quality!</p>
</div>
</div>
<div class="caixa">
<div class="row">
<img src="imagens/dinheiro.png">
<p style="text-align:center;">Cheapest prices in the market! Promotions 24/7! If there are cheaper offers, let us know and we will match it with a promotion of 0.01€!</p>
</div> </div>
<div class="caixa">
<div class="row">
<img href="#" src="imagens/definicoes.png">
<p style="text-align:center;">Our customer support department is active 24/7! We will resolve all your queries!</p>
</div> </div>
</div>To ensure that boxes can contain images or other content while maintaining a fixed aspect ratio, you can use the following method:
.container{float:left; width:100%; background-color:deeppink;}
.small-box{float:left; width:22%; margin:0 5.665%; background-color:bisque;}
.fit-content{float:left; width:100%; margin-top:100%;} <div class="container">
<div class="small-box">
<div class="fit-content"></div>
</div>
<div class="small-box">
<div class="fit-content"></div>
</div>
<div class="small-box">
<div class="fit-content"></div>
</div>
</div>It's important to ensure that the width of both the "caixa" and "produtos" divs is balanced. Using percentages could make it more responsive across different screen sizes.
Click here for the Fiddle link
I hope the Fiddle link will be helpful for you.
I want to align the logout button to the right within my bootstrap navbar. https://i.stack.imgur.com/PDvSv.png Here is a demonstration of the current behavior: https://codepen.io/agrawalo/pen/mdbKYLX Code: <nav class="mb-1 navbar navbar-expand-sm na ...
I am facing an issue with aligning a button and 2 images in a row on my website. Currently, this is how it looks: https://i.stack.imgur.com/yrQB6.png Here is the HTML code I am using: <div class="row text-center"> <div class="col-md-12"> ...
We are in the process of creating a versatile mobile app that will work on multiple platforms using HTML5, JavaScript, and CSS. Our design approach includes utilizing Bootstrap for a responsive user interface, and Cordova to package the application for bot ...
Can you provide guidance on how to modify the background color using JavaScript for the different styles listed below? i) Internal Style sheet and/or ii) External Style sheet I am currently working with the card deck slide show available at https://githu ...
Within my web application, there is a list displaying options for the user. Each 'li' element within this list is clickable, allowing the user to navigate to their selected option. Additionally, every 'li' element contains two buttons - ...
Among the numerous StackOverflow examples showcasing an auto-height Textarea, one noteworthy example can be found here: <textarea oninput="auto_grow(this)"></textarea> textarea { resize: none; overflow: hidden; min-heig ...
I am currently facing an issue with two buttons that have the same function. The purpose of these buttons is to retrieve data from an API, convert it to HTML, and then append it to a <div> using jQuery. Finally, the data is displayed using the slick ...
Within my JSP, there is an anchor tag that looks like this: <a href="patient/tools.do?Id=<%=mp.get("FROM_RANGE") %>"> <%= mp.get("DESCRITPION") %></a>. Whenever I click on the anchor tag, the URL appears in the Address bar. How can ...
Is it possible to create a multicolumn layout in HTML that flows from left to right, rather than top to bottom? I am looking to define the height and width of each text column div, so that when the text overflows the box, a new column is automatically ge ...
When it comes to creating a card game, which platform is more suitable: SVG or canvas using kinetic.js or oCanvas library? In terms of performance, event handling, and object tracking, which option would be more efficient? Additionally, if there is a bet ...
I've been working on creating my personal HTML record, but I'm facing one last challenge that I can't seem to overcome. I want to design my header like this: https://i.stack.imgur.com/FU8EJ.png With the following elements: TEXT SUMMARY wi ...
I'm having trouble with the function displaying within the input field. My goal is to simply allow the user to enter a name and have it displayed back to them. HTML: <div ng-app = "mainApp" ng-controller = "studentController"> <tr> < ...
I am currently working with material-ui and encountering a roadblock. My goal is to design a homepage for a dashboard where the various services are listed. I am attempting to organize these 6 buttons into 2 rows and 3 columns, totaling 6 buttons in all. A ...
I am currently working on matching the heights of two columns without using an existing library like match-height.js. In this specific case, I have a row with 2 columns where the first column contains a centered black square and the second column contains ...
Take a look at the HTML page on this JSFiddle link: http://jsfiddle.net/rb8rs70w/2/ The page features a "sticky" header created using CSS with the property position: absolute. ... <body class="body-menu-push"> <header role="banner"> ...
I'm having trouble getting a sound effect to play consistently in my game whenever there is a hit. Sometimes the sound plays, other times it does not! Here is the code I am using: <script> var hitSound = new Audio(); function playEffectSound ...
Creating a unique bootstrap theme for Wordpress and encountering an issue with hiding the "sptxt" text on mobile screens. <div class="row"> <div class="col-lg-5 col-sm-12"><div id="gr"></div></div> <div class="col- ...
Here is a straightforward and easy-to-understand code snippet: HTML markup: <div class="jumbotron text-center top-jumbotron"> </div> CSS: .top-jumbotron { background: #ffcc00; background-image: url('../../bootstrap/img/home-pag ...
I need assistance with creating an image cropping tool that allows users to upload a picture, crop it, and display it on the page as an image.jpg rather than as base 64 (data:image). I have tried using HTML and JavaScript but it seems impossible, so now I ...
The dropdown menu I created using an HTML select tag contains a total of 152 options. However, the large number of options causes some of them to be out of view on most monitors when the size is set to 152. I attempted to limit the number of displayed opti ...