Div expanding beyond intended size when media reaches maximum 468 pixels

When zoomimg is set to width: 145px; height: 145px; it ends up pushing the text that should be inside its parent element out of the parent.

If you want to see the Zoomimg ProjectKort divs, check out the code below:

.projectkort{
  margin: 10px 0px 10px 0px;
  width: 100vw;
  height: 150px;
  background-color: white;
  border-radius: 0px;
}
.zoomimg {
  margin: 5px;
  width: 145px;
  height: 145px;
  transition: all .3s ease;
  opacity: 1.0;
  position: relative;
  overflow: hidden;
}

To see this in action, click here -> tsuts.tskoli.is/2t/2809984199/skapalon

Answer №1

To eliminate overflow issues on smaller mobile screens, consider adding 'overflow:hidden' specifically to the projectkort class.

The box content extends beyond the container width, causing overflow. By applying overflow:hidden to the parent projectkort class, the issue was resolved on mobile devices.

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

Converting HTML table data into a JavaScript array

On my website, I have an HTML table that displays images in a carousel with their respective positions. The table utilizes the jQuery .sortable() function to allow users to rearrange the images by dragging and dropping. When an image is moved to the top of ...

Troubleshooting Problems with Cascading Style Sheets

Struggling with a layout issue on my website. I need to display an image with text at the beginning of the site-wrap div under the name background-image, with the text inside that div. Adding line-height to the text div adjusts its height, but I want to m ...

Unable to apply box-shadow styling to input elements

Why am I having trouble adding box shadows to input elements in my CSS? I've tried something like this http://jsfiddle.net/DLCTh/, and while it applies correctly to div elements, it doesn't seem to work on text inputs. Am I overlooking something ...

Semantic UI allows for both left and right action input functionalities to be utilized

Is there a way to add actions on both ends of an input field? Here's what I've tried so far: <form class="ui form"> <div class="ui left action input"> <select class="ui compact selection dropdown" name="seats"> ...

What is the best way to create a toggle button that can show more or show less of a text snippet with animation?

Is it possible for someone to assist me with showing a long text partially and providing a "show more" button to reveal the rest, along with a "show less" option, all with some CSS animation? I was thinking of using a font awesome arrow down icon for expan ...

Expanding HTML Editor's Functionality in Eclipse with Custom Tags

Creating an application involves incorporating custom tags within HTML code, which are processed on the server side before being presented to the end user as valid HTML. An example of using custom tags is shown below: <html> <body> ... < ...

Performing condition checks within the foreach loop and displaying numerous results in a single row

I have a list of results from searching certain parameters and I need to print them out. When using a foreach loop to print the results, I want to ensure that if the purchase dates are the same, they should be printed in the same row. How can I achieve thi ...

Creating a PDF in Python from an HTML / CSS file with images: A step-by-step guide

Suppose I have an HTML / CSS webpage containing images, and I am looking to create a PDF using Python - is this feasible? ...

What is the most effective way to address duplicate title/meta tags on paginated pages? Can you share some recommended strategies for handling this

Google's webmaster tools are indicating the presence of Duplicate title tags on pages that have pagination. Below are a few examples: HTML suggestions Duplicate title tags Your title provides users and search engines with valuable information about ...

Guide to ensuring the navbar remains at the top of the webpage following an image

I am attempting to create a sticky navbar that stays at the top of the page once the header has been scrolled past. It should have a similar effect as shown in this example on codepen.io, but with the addition of an image that stretches across most of the ...

Modify the color of the matSnackbar

I'm having trouble changing the snackbar color in Angular using Angular Material. I tried using panelClass in the ts file and adding it to the global css, but the color remains unchanged. Any suggestions on how to resolve this? I am still new to this ...

Binding iframes in Angular 6

Is there a way to display iframe code stored in a variable within a div? Here's the HTML code: <div class="top-image" [innerHTML]="yt"></div> And here's the TypeScript code: yt = '<iframe class="w-100" src="https://www.you ...

What is the best way to incorporate navigation options alongside a centered logo?

Looking to create a unique top header layout with the logo positioned in the center and navigation options on both sides. Below is the initial code, but unsure how to proceed further. Any suggestions on achieving this design? <div class="header"> ...

Tips for Choosing Certain List Items in a Responsive Bootstrap Navigation Menu for WordPress

I've put together a sleek bootstrap navbar menu for WordPress. If you want to check out the menu design, you can view it by clicking on this link: here There are still some tweaks that need to be made though. Specifically, I need to add a box around ...

What are some ways I can showcase the outcomes of my multiple choice quiz?

I need help with my multiple choice quiz. I want to display the answers under each question and highlight the correct one in bold. Here is the current code: function check() { var question1 = document.quiz.question1.value; var question2 = document.q ...

Unveiling the Power of Angular in Handling Date and Time

Recently, I encountered an issue with the following code snippet: <ng-template>{{date:'MM/dd/yyyy h:mm:ss a Z'}}</ng-template>. This code displays a date and time in one long line. My goal is to insert a line break between the date an ...

Updating the src of an iframe and adding an onclick event to a link using JavaScript

Looking to design a page that accommodates both login and sign up functionalities by dynamically updating the src of an iframe. In the navigation bar, there is: <li id="change"><a onclick="sign()">Sign up</a></li> And within the ...

I'm currently attempting to determine the total cost of a series of operations, however, I am not receiving any results

Here is the code snippet from my HTML file: <tr> <td><input id="z1" type="number" oninput="calculateSubTotal()"> </td> <td>Shirts - WASH - Qty 1 to 4</td> <td>2.50 ea</td> ...

Tips on adjusting CSS code to ensure that a single accordion panel is open when the page first loads

I have a code that is functioning perfectly. However, I need to make a modification so that there is a default panel open when the page loads or refreshes. #acc-label { display: block; float: left; height: 330px; width: 50px; margin-bottom: 10px ...

The embedded Google iframe is causing unnecessary padding at the bottom of the page

Below is a snippet of HTML code: <div class="google-maps"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d109782.8671228349!2d76.62734023564995!3d30.69830520749905!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390fee90 ...