CSS problem with image dimensions

After using a code to add store images and links in Wordpress through a Widget, I have encountered an issue where the images box is extending in width inexplicably.

Here is a screenshot of the problem -

https://i.sstatic.net/Z4iZq.png

And here is the desired outcome as shown in the screenshot below

https://i.sstatic.net/0xMFD.jpg

Below is the code snippet that I am directly placing in the Wordpress widget:

.go-home-stores {
  margin: 0 -4px
}
.coupon-store,
.go-home-stores a {
  display: block;
  border: 1px solid #dde1e4;
  margin-bottom: 8px;
  background-color: #fff;
  overflow: hidden;
  text-align: center
}
... (code continues)

... (code continues)

htmlcssmedia-queries

Answer №1

One possible solution might involve the utilization of media queries. Take a look at the JSFiddle demonstration

HTML:

<div class="go-home-stores"> 

<div class="gocol-4"> <a href="#" title="Mobikwik Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/mobikwik-1432618126498.jpeg" alt="Mobikwik Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="Myles Car Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/mylescar.jpeg" alt="Myles Car Coupons"> </a> </div> 
...</answer1>
<exanswer1><div class="answer" i="38525751" l="3.0" c="1469177450" m="1469201534" v="1" a="c2FpZnVs" ai="6599545" e="VG90YWxORkw=" ei="6500986">
<p>Perhaps by incorporating media queries. <a href="http://jsfiddle.net/3ohew94m/" rel="nofollow">JSFiddle Link</a></p>

<p><strong>HTML:</strong></p>

<pre><code><div class="go-home-stores"> 

<div class="gocol-4"> <a href="#" title="Mobikwik Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/mobikwik-1432618126498.jpeg" alt="Mobikwik Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="Myles Car Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/mylescar.jpeg" alt="Myles Car Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="Shopclues Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/shopclues-1457362077302.jpeg" alt="Shopclues Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="Jabong Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/jabong-1432618184670.jpeg" alt="Jabong Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="UBER Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/uber-1454587308013.jpeg" alt="UBER Coupons"> </a> </div>
...

OLD CSS:

    .go-home-stores{margin:0 -4px}.coupon-store,.go-home-stores a{display:block;border:1px solid #dde1e4;margin-bottom:8px;background-  color:#fff;overflow:hidden;text-align:center}.go-home-stores a img{max-width:100%;max-height:100%}.go-home-stores a{line-height:40px;height:44px}.go-home-stores .gocol-4{padding:0 4px}.coupon-store{line-height:30px;height:36px}.coupons-list{padding:1px 0;position:relative;overflow:hidden}.coupons-list h2{margin-bottom:8px;font-size:16px}.coupons-list .coupon{opacity:1;transform:scale(1);-webkit-transform:scale(1);-ms-transform:scale(1);-moz-transform:scale(1);margin-top:0 !important;background-color:#fff;border:1px solid #e5e5e5;box-shadow:0 2px 4px -1px rgba(0,0,0,.1),0 3px 12px rgba(0,0,0,.04);padding:10px 8px;position:relative;overflow:hidden;font-size:15px;transition:.35s;-webkit-transition:.35s;-moz-transition:.35s;-o-transition:.35s}.coupons-list .coupon .coupon-box>div:last-child,.coupons-list .coupon .coupon-click,.coupons-list .coupon .gocol-6{padding-right:0}.coupons-list .coupon.swiped-left{border-right-width:12px}.coupons-list .coupon.swiped-right{border-left-width:12px}.coupons-list

NEW CSS:

.go-home-stores .gocol-4 {
    padding: 0 4px;
    display: inline-block;
    float: left;
}

  @media screen and (max-width:767px) {
    .gocol-4 {
    width:25%;
    float:left;
  }
}

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

Steps for generating a div, link, and image that links to another image using Javascript

Hey there, I have a cool picture to share with you! <img src="cards.png" id="img"> <!--CARD PICTURE--> Check out what I want to do with it: <div class="container_img"> <img src="cards.png" id="img"> <!--CARD PICTURE--> ...

javascripthtml

Having trouble with ion-item click not functioning in Ionic 3?

Working on my Ionic 3 project, I have encountered an issue with the ion-item click listener. The scenario is that I am adding text over a canvas and then attempting to change the style of the text (such as font-family, font-size, bold, and italic). The UI ...

javascriptcssangularionic3angular6

What is the best way to utilize mouseenter and mouseleave events concurrently?

I need some assistance with my website's star rating feature. When a user hovers over the stars, a popover should appear, and when they move their mouse away, the popover should disappear. Currently, I am using jQuery to achieve this functionality: $( ...

javascripthtmljquerymouseevent

JavaScript slice() method displaying the wrong number of cards when clicked

In my code, I have a section called .registryShowcase. This section is designed to display logos and initially shows 8 of them. Upon clicking a button, it should load the next set of 8 logos until there are no more left to load (at which point the button ...

javascripthtmljquerycss

"Challenges in styling a table within a div: the text fails to adhere to the

I am struggling to identify the source of a problem in my code. The issue seems to be related to the padding within the parent div, specifically with the text "1 Healthy Midday Meal for One Child Overseas" and how it is ignoring the 5px right padding. Upon ...

htmlcss

In order for Angular forms to be considered valid, they must fall into one of two form

I am attempting to create a dynamic angular form where the user must enter either A or B. A represents a unique identifier, while B consists of a set of values that correspond to that identifier. My goal is to validate the form as valid if either A is ente ...

javascripthtmlangularangular-reactive-formsangular-validation

Submitting a form triggers an SQL insert using PHP and Mysql

On Page 1, users input their information and then proceed to Page 2. The data entered on Page 1 is stored in $_POST for access on the next page. I can successfully insert this data into a MySQL database without any issues. However, I want to ensure that th ...

phpmysqlhtmlpostpdo

Text wrapped automatically to display multiple lines with spacing between each highlighted line

Question about CSS formatting and spacing. I need to automatically break sentences into new lines based on the width of the container. For example, a sentence like: This is a sentence should be displayed as: This is<br>a sentence I am trying ...

htmlcssfrontend

Can a person select a characteristic like "height" using Javascript?

Is it doable to set a height for an image in CSS, then detect this gradient using JS and double the width based on the height x2.25? Could this be achieved? ...

javascriptcssattributesscale

Navigating through an array of objects with Node.js

Recently, I integrated the ChartJS library into my Node web app to visualize data. The following is nested in a script tag on an EJS template page: <script> let playerStatChart = new Chart(myChart, { type: 'bar', data: { la ...

javascripthtmlnode.jschart.jsejs

Changing Background Images Based on Screen Size in CSS Media Queries

Hey there, I am currently using two different header images - one for desktop and another for both tablet and mobile devices. I am wondering how I can automatically switch from the desktop header image to the mobile/tablet header image when the screen siz ...

htmlcssresponsive-designmedia-queries

How to align a Bootstrap form to the center

Struggling to center the opt-in form on my website, I've created a "center" class with margin properties but it's not working as expected. .center { margin-left: auto; margin-right: auto; width: 100% } I suspect that one of Bootstrap's cla ...

csstwitter-bootstrap

The action of JQuery is modifying the value of the checkbox, but it is not visually showing as checked

I am working on a list that contains checkboxes and text, similar to an email inbox. My goal is to be able to check or uncheck the checkbox anytime I click anywhere on the list item (row). To achieve this functionality, I have used the following code withi ...

javascriptjqueryhtmlcheckbox

Adding a variable to the .append function in HTML code

I am currently working on a way to include the current date and time when a user comments on a post in my forum. While I have successfully managed to upload the text inputted by the user into the comment section, I am now looking to also dynamically insert ...

javascriptjqueryhtml

Is it possible to mix units within the 'path' element in SVG?

Utilizing SVG's rectangle element, you can specify dimensions as a percentage of its owner's dimensions and set a radius in pixels. By using the code below: <div style="position: relative;"> <object class="AIRound" t ...

htmlsvg

Tips for successfully passing ExpressJS locals variable to an EJS template and utilizing it as a parameter when invoking a JavaScript function during the onload HTML event

const hostname = "192.168.8.154"; const port = 3002; app.use('*', function (req, res, next) { db.collection('sys_params').find().toArray() .then(sysParams => { //console.log(sysParams); app.locals.sysParams ...

javascripthtmlnode.jsexpressejs

Is there a way to rotate a symbol around its center without the need to specify its position on two separate occasions

I am working on placing tile symbols on a grid and aiming to achieve the following: Utilize tile coordinates for symbol placement (e.g. 4,2 instead of 85,43) Define the vertices of symbols using pixel coordinates (not tile coordinates) Rotate symbols arou ...

csssvgcss-transforms

jQuery is unable to locate the FireBreath object

Currently, I am in the process of developing a web video player by using Firebreath to compile my C/C++ codec as a browser plugin. The plugin has been successfully loaded and is functioning properly (start, stop video, etc.). My next goal is to enable full ...

javascriptjqueryhtmlcssfirebreath

Selecting a folder path with Angular 6: A step-by-step guide

Currently, I am aiming to extract the folder path string without uploading any files. The goal is simply to capture the path for future use. Below is an example of how you can prompt users to select a file: <input id="folder-input" #folderRef type="fil ...

htmlangular6

Tips for applying unique scss classes to a div based on a specific condition

Currently, I am developing a chat application where I want to showcase messages from one specific user on the right side of the screen while displaying messages from other users on the left side. <ion-item *ngFor="let message of messages | slice:0: ...

cssangularionic-frameworksassflexbox