My buttons have the following properties:
background: #c6cdf2;
border: 1px solid #8896e4;
border-radius: 3px;
padding: 6px 10px 3px 10px;
When the page resizes, the buttons don't respect the padding and start overlapping each other.
https://i.sstatic.net/WWZ3f.png
https://i.sstatic.net/w1wY7.png
Is there a way to automatically calculate the proper margin between the borders? I prefer not to set a fixed margin to avoid this issue.
Utilize flexbox for a simpler solution without the need for media queries or extra code.
div {
display: flex;
flex-wrap: wrap;
}
a {
background: #c6cdf2;
border: 1px solid #8896e4;
border-radius: 3px;
padding: 6px 10px 3px;
margin: 10px /* customize as needed */
}<div>
<a href="#">long long long text</a>
<a href="#">long long text demo</a>
<a href="#">short text</a>
</div>Consider including the following two additional style attributes:
float: right;
overflow: hidden;
Hopefully this suggestion proves useful to you.
To ensure compatibility with older versions of Internet Explorer such as IE9 and IE8, it is recommended to utilize media queries for the Flex property.
@media screen and (max-width: 380px) {
.yourSelector {
display: block;
width: 100%;
}
}
Additionally, include margin:0.5% and box-sizing: border-box in your styles.
Complete Code :
.b {
background: #c6cdf2;
border: 1px solid #8896e4;
border-radius: 3px;
padding: 6px 10px 3px 10px;
margin: 0.5%;
box-sizing: border-box;
}
@media screen and (max-width: 380px) {
.b {
display: block;
width: 100%;
}
}<a href="#" class="b">Button1 </button>
<a href="#" class="b">Button2 </button>
<a href="#" class="b">Button3 </button>
<a href="#" class="b">Button4 </button>
<a href="#" class="b">Button5 </button>One issue that arises is that the elements are set to be inline (display:inline), which limits the ability to add padding using the line-height property. To resolve this, consider changing the display style to block or inline-block in order to utilize paddings effectively.
I'm attempting to achieve a specific layout that includes images scaling across Bootstrap breakpoints and a static button position. The challenge is maintaining the layout as depicted in the mockup, regardless of image size. The images are set to im ...
learn HTML code <select name="register-month" id="register-month"> <option value="00">Month</option> <option value="01">January</option> <option value="02">February</option> <option value="03"& ...
I am utilizing the Bootstrap 5 navigation bar and trying to figure out how to remove the blue border from the "Dropdown" when clicked on. Despite my efforts to find a solution, I have been unsuccessful. <nav class="navbar navbar-expand-lg navbar ...
Incorporating AngularJS with HTML5 Server-Side Events (SSE) has allowed me to continuously update the data displayed on a webpage. One challenge I've encountered is managing the icon that represents the connection state to the server. My approach inv ...
I have three anchor tags that are dynamically added from an ajax $.get() response. Whenever one of them is clicked, I want to trigger a second request. The parameters for the second request should be set based on the global data attributes in these an ...
My attempt to use JavaScript to change the text of this element has not been successful. The header I am trying to modify is enter image description here var elem = document.getElementsByClassName("headertext"); elem.innerHTML = "hello world"; <ul cl ...
I've noticed that this code successfully aligns a div vertically within its parent element: .element { position: relative; top: 50%; transform: translateY(-50%); } My curiosity lies in the reasoning behind this. Initially, I thought that the p ...
Recently, I stumbled upon an amazing 3D image gallery example created using jQuery and CSS3. http://tympanus.net/codrops/2013/01/15/3d-image-gallery-room/ Excited by the concept, I attempted to incorporate a zoom effect (triggered every time a user clic ...
Encountering an issue with using overflow-y inside tbody. Attempting to set the maximum height of the tbody results in it shrinking into a single column, as shown in image 1. Seeking assistance in resolving this problem. Thank you. Below is the HTML code: ...
Below is the code snippet I am working with: <div><p><span>... highlighted text ...</span></p><p>Chapter info</p></div> Here is a screenshot of how it currently appears: I am looking for a way to add paddi ...
Why is image 6.png selected, when all the images are direct descendants of the div shape? Thank you for your assistance, it's greatly appreciated. As far as I know, it should select all the divs because they are all direct descendants of the div #shap ...
I am struggling to create a search match list that updates as the user types in their query. However, I am facing an issue where the input element loses focus to the pop-up. I have attempted to programmatically set the focus using refs, but I am unable to ...
I am trying to create two sentences with a fixed width of 30%, but the first words in my div go to the next line. The class="left" words are not displaying properly, and then my second div "words" gets mixed with the first div. HTML <div class="bg"> ...
Is it possible to embed specific information into HTML elements, like images, without disrupting valid HTML markup? Would the following example be considered valid HTML? <img src="..." class="isearcher:tags(paris+hilton,gary+suneese)" > The idea is ...
Within a VueNative project that utilizes NativeBase as a component library, with tags prefixed by nb-, the code snippet below is found within the <template> tags of the footer.vue file which houses navigation buttons. This piece of logic successfully ...
For my assignment, I am designing a website layout and facing an issue where the text appears behind the navigation bar instead of below it. I have tried adjusting the margin-bottom to 50px with important tags and setting the nav bar as static. Despite tr ...
Is there a way to show the email content stored in a HTML page? $.ajax({ type: "POST", url: "./mailBody.php", dataType: 'json', success: function (data) { $.each(data, function(index, element) { $('.mail ...
I'm encountering a "mixed content" error on my website caused by one font being loaded via HTTP. The font is referenced in a CSS file like this: @font-face { font-family: 'fontXYZ'; src: url('../font/fontXYZ.eot'); src: url ...
I am looking to incorporate LESS into my React app, but I have been unsuccessful in finding a solution through Google. As a newcomer to ReactJs, I lack deep knowledge and would greatly appreciate guidance on installing Less. If anyone is able to help me ...
Have you experimented with creating webpages using react.js along with the Material UI library? How can I adjust the size of an SVG icon? Recently, I developed a "create new" component, which consists of a material paper element with an add button on top. ...