After just starting to learn coding, I've decided to create my website using Squarespace and www.rociodelfa.com.
One issue I'm facing is with the gallery on my inspiration page. I want the images to follow a cohesive order and have a fixed number per line, but it varies between lines.
On mobile devices, the images are stacked. How can I change this layout?
Take a look at the code snippet provided below.
* {
box-sizing: border-box;
}
.wrapper {
width: 20%; /* To display 5 pictures in one row, set width to 20% */
float: left;
padding: 10px;
}
.wrapper img {
width: 100%;
}<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>
... (repeating image divs)
<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>Trying to create a customized PACS viewer for scrolling through a series of CT head images. However, encountering an issue with scrolling through all 59 images. Currently, able to scroll from the first to the 59th image, but struggling to loop back to the ...
I successfully created a website using only HTML, JavaScript, and jQuery without any server-side scripting or language. Within my website, I have a simple stream.html page that remains unstyled with no CSS formatting. <html> <head> </head& ...
I am encountering an issue with the canvas element in my code. The canvas is supposed to update whenever its containing div is resized. window.addEventListener('resize',function() { let mapwidth = $('.canvas').attr("width") l ...
Here is the layout I am working with: <div contenteditable=true> /// <div contenteditable=false>not editable</div> /// </div> One problem I'm facing is that when the non-contenteditable div is the first element on a ...
Need help with creating an HTML etch-a-sketch! I have a div container with multiple div elements inside it, all set up with CSS grid display. HTML structure: <div id="canvas"></div> To populate the canvas with div elements, I'v ...
I'm struggling with aligning my bootstrap flexbox container properly. I want the image to remain horizontal on the left, while the title, description, and "powered by" sections stack vertically to its right. So far, all my attempts to achieve this hav ...
I am facing an issue with displaying images in a div of various resolutions. When I have a wide image with low height, such as 730x90, it does not show properly on mobile devices. The width shrinks but the height remains the same. Below is the code snipp ...
I'm trying to wrap the text in two lines. When I use the following code on Google Chrome: overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 100%; white-space: normal; However, this code ...
I have implemented a Jquery movie seat selection plugin on my jsp website successfully. It allows users to select seats with ease. However, the issue I am facing is that due to my limited knowledge of Jquery, I am unable to display the selected seats by t ...
I am currently working on a website, which is just a demo built in ReactJS: The issue I'm facing is related to the background. The idea behind the app is simple - it consists of 4 parts, with the top part displaying weather information without a bac ...
Trying to style a row of buttons on the left, a center-aligned navigation list, and another row of buttons on the right. The navigation buttons are grouped to account for layout changes. How can I horizontally center the navigation within the parent elemen ...
I've developed a series of AJAX functions that retrieve data from a PHP file. However, one of the functions redirects to the PHP file to fetch data but fails to return to the HTML page for data insertion. Here is the code used to fetch a table from a ...
I am trying to create a zoom effect on the background-image with an animation but I am encountering issues where all child elements are also animated and zoomed. When hovering over the element, I want only the background part to be animated and zoomed, and ...
Looking to dynamically adjust the width of an input field and ensure that the suffix "meters (m)" sticks close to the entered number. Additionally, I want to pass a specific value to the input using `value="something"`, which then should expand the input w ...
I recently created an expansion panel that is working well, but I am having trouble removing a padding from the subpanel section. Despite my efforts, I haven't been able to find a suitable solution. Here's a link to the panel image: https://i.ss ...
Currently, I am working on an HTML website project where I am integrating header and footer content from separate HTML files into each page using jQuery. However, I have encountered an issue while the page is loading. Upon loading, the content initially ...
Recently, I implemented hover and click events to trigger the opening of a dropdown content The functionality is mostly working as expected but there is a slight issue When hovering over the element, the content opens and closes properly However, on the ...
Looking to enhance my HTML page by adding some content in a DIV using XML and XSLT. How can I import the XML and evaluate the corresponding XSLT? I attempted using iframe, but ran into issues with resizing to fit the content. I also tried utilizing the sc ...
I have a question that I couldn't find the answer to in any documentation or on Stack Overflow. While this example may not be perfect, it should give you a basic understanding of what I'm trying to achieve. Illustration .btn-group { .btn ...
I am a beginner in HTML and PHP. I have encountered an issue where the data displayed shows as "0000-00-00" for dates and if the mobile number entered is less than 9 characters, it displays the same numbers repeatedly. However, when I enter 10 digits for t ...