There seems to be a CSS problem causing the button to be displaced. Let's address

I am encountering some problems with my business website.

After purchasing a theme for my WordPress site, I downloaded a few extensions that were included in the theme. However, I noticed an issue when I zoom out on Chrome or Firefox – the "Teilen" picture on the right shifts to the next line and I want it to remain in its original position.

Below is the code snippet:

.products li.product.grid.with-hover .product-actions {
    top: 5px;
    left: 19px;
    right: 19px;
    padding-top: 13px;
    text-align: center;
    position: absolute;
    border-top: 0;
}
...

CSS Issue

https://i.sstatic.net/zHvIg.jpg

Website: www.lockpick.ch

I would appreciate any help as I'm new to CSS/HTML...

Thanks, Lucia

javascripthtmlcsswordpress

Answer №1

The problem arises when these elements are set to a width of 33.3333%. While this often approximates to 1/3, in certain situations, it can result in the total width exceeding 100%.

An easy solution is to adjust the width from 33.3333% to simply 33%. This slight change should not be noticeable to users visually and will effectively resolve the issue.

You can find the relevant CSS code on line 675 of style.css from the website link provided:

ul.products li.product.grid.with-hover .product-actions .buttons.buttons_3 > *,
.product-box .buttons.buttons_3 > * {
        width: 33%;
}

Answer №2

It is recommended to give it a try! By default, the box-sizing property is set to content-box, which means that only the width and height properties (including min/max properties) apply to the content itself. Border, padding, and margin are not included in these calculations.

These elements have a border-left of 1px with a solid #e0dfdf color and a width of 33.333%. On smaller screens, each element will have a narrower width, such as less than 100px, causing the 1px border to take up more than 1% of the width. As a result, the last element is forced onto the next line.

ul.products li.product.grid.with-hover .product-actions .buttons a.details,
.product-box .buttons a.details {
   box-sizing: border-box;
}

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

The collapsible section expands upon loading the page

Trying to implement Disqus as a plugin on my test webpage, I created a collapsible section with a "Show comments" button. The idea was to hide the plugin by default and reveal it only when users click on "Show comments". Despite using the w3schools example ...

javascripthtmlcsscollapsable

Mongoose: When attempting to cast the value "undefined" to an ObjectId at the _id path for the model "", a CastError occurred

I am working on developing an app using the MERN stack. However, I encountered an issue when trying to add a user to the current database. The error message reads as follows: CastError: Cast to ObjectId failed for value "undefined" at path "_id" for model ...

javascriptnode.jsmongodbmongoose

Utilizing repeater fields to display numerous slideshow presentations on a single webpage

Is there a way to display multiple slideshows on one page from my website using a repeater ACF for entering images? The challenge is not knowing in advance how many slideshows will be displayed. When only one slideshow is displayed, everything works perfe ...

javascriptphpslideshowrepeateradvanced-custom-fields

Are there any effective methods for assigning data to a MapObject?

Is there a way to refactor and organize an array using the "reduce" method instead of "forEach" or "map"? Using beeProps.valueInfos.reduce(reduce()) would be very helpful. [Date, Object] ---> [Number, Object] --- I want to group objects with the same " ...

javascriptreactjstypescriptalgorithm

How to call a function within a component from another component without encountering the "Cannot read property" error

Having trouble calling a function from one component in another by passing the reference of one to the other. I keep getting a "Cannot read property" error. Below is the code snippet Alert Component import { Component, OnInit, Output } from '@angula ...

javascriptangulartypescriptcomponents

Testing the Router.push function using Jest and ReactHere is a guide on how

As a beginner in unit testing, I find it challenging to grasp how I can effectively test or mock a push from a router. <Tab label="Members" alt="Members" onClick={() => Router.push('/members')}/> I am particularly concerned about testi ...

javascriptreactjsjestjs

AngularJS Expression Manipulation

I am looking to implement a functionality similar to the one below: HTML <mydir> {{config = {type: 'X', options: 'y'}} </mydir> <mydir> {{config = {type: 'a', options: 'b'}} </mydir> JS Dir ...

htmlangularjsangularjs-directiveangularjs-controller

Mastering JavaScript: Techniques for Selecting Multiple Values in a Dropdown Menu

I have a code that works perfectly, but the issue arises when I click on the add button and a new select option is added with a value instead of an id. How can I pass the Id to option.value = array[i]; ? var array = ["PACKING & LOADING","BAG GODOWN", ...

javascriptphparrayshtml

"Use Highcharts to visually compare the data from one month in two different years

How can I use Highcharts Columns to compare data from two different years within the same month? Check out the example image below: https://i.sstatic.net/8MMsA.png The data structure is as follows: myData[0] = { data1:"0.00", data2:"0.00", data3:"868.0 ...

javascriptjqueryhighcharts

Issue with Wordpress Photo Gallery not showing up - the_content function

As I immerse myself in the world of creating my very first WordPress Theme, I've hit a roadblock. The site I'm working on is a one-page website, but I'm pulling content for each "section" from WordPress "pages" CMS. Here's what I have s ...

phpwordpresswordpress-theming

Delay the occurrence of a hover effect until the previous effect has finished executing

As I hover over an element, the desired animation is displayed while hiding other elements on the page. The challenge I'm encountering is that if I quickly hover over many divs, the animations queue up and hide the divs sequentially. I want only one ...

javascriptjquerycssjquery-hover

How come the font size doesn't transfer from the div element to the table element?

I am experiencing an issue with my document presentation. The document is simple and includes HTML and CSS code as well as some text content. When I render the document, I notice that the table element does not inherit the font size from its parent div, un ...

htmlcss

The current PHP value updates every 10 seconds, but I would like it to load instantly when the page loads

Currently, I have a script in place that updates the placeholder field of an input textbox with the latest bitcoin price every 10 seconds: var auto_refresh = setInterval( function() {$.get('gox.php', function (data) { $("#inputid").attr( ...

phpjavascript

Unable to submit form using jQuery is not functioning as expected

I am attempting to trigger a function when the submit button in the form is clicked. My aim is for the page not to refresh, and instead, I want to use AJAX to add the category. The issue arises when I manually include it in the HTML file, everything works ...

javascriptformsjquery

Implementing hover-over tooltips with JavaScript and HTML

New JS function: function DisplayToolTip() { let x = event.clientX; let y = event.clientY; document.getElementById('divToolTip').style.left = x + 'px'; document.getElementById('divToolTip').style.top = y + &ap ...

javascriptjqueryhtmltooltip

CSS/ Javascript - emulate the appearance of the image using CSS3 or Javascript (sticker-like design)

Hi, I need help figuring out how to recreate this image using only CSS for the font and style. I attempted it with this code on JSFIDDLE: JSFIDDLE CSS *{ font-family: 'Asap', sans-serif; font-size:130px; color:#444; ...

javascriptjquerycss

Prevent the left border from displaying on a link that wraps to a new line

Excuse me, I am facing an issue with a pipe separator in my subnav bar between links. The problem is that the first link on a new line retains the left-border that should be disabled. How can I prevent this border from appearing on the first link of a new ...

javascriptjqueryhtmlcss

Data disappears on the following line

Could someone please help me understand what's going on in these snippets of code and how I can resolve it? I am fetching data in the parent component's mounted function and updating its data. As a result, the child component receives the new ob ...

javascriptvue.js

Having trouble loading my app.js in Angular - Seeking help on Coursera!

I've followed the instructions provided thus far and inserted the HTML code accordingly. However, upon attempting to load the page, all I see is: The tabs: The Menu Appetizers Mains Desserts The description: image: dish.name , dish.name , dish.labe ...

javascripthtmlangularjs

Sending a parameter to a confidential npm module

I've developed a custom npm module that can be used in my applications by including this code snippet in the HTML: <app-header-name></app-header-name> Here is the TypeScript code inside the npm package: import { Component, OnInit } from & ...

javascriptnode.jsangulartypescriptnpm