Ways to remove border when image is not present

I've been attempting to use JavaScript to hide the border, but it doesn't seem to be working. Is it possible to hide the border in HTML using Java?

.........................

Check out my page here

Here is a snippet of my HTML:

<!-- Single Product Details -->
<div class="small-container single-product">
    <div class="row">
        <div class="col-2">
            <img src="Fn_Img/images/_Snake_ White Tee — Yeaaah! Studio.png" width="100%">
            <div class="small-img-row">
                <div class="small-img-col">
                    <img src="Fn_Img/images/gallery-1.jpg" width="100%">
                </div>
                <div class="small-img-col">
                    <img src="Fn_Img/images/gallery-2.jpg" width="100%">
                </div>
                <div class="small-img-col">
                    <img src="Fn_Img/images/gallery-3.jpg" width="100%">
                </div>
                <div class="small-img-col">
                    <img src="" width="100%">
                </div>
            </div>
        </div>

CSS style

.single-product{
    margin-top: 80px;
}
.single-product .col-2 img{
    padding: 0;
    cursor: pointer;
}
.single-product .col-2{
    padding: 20px;
    position: relative;
}
.single-product h4{
    margin: 20px 0;
    font-size: 22px;
    font-weight: bold;
}
.single-product select{
    display: block;
    padding: 10px;
    margin-top: 20px;   
}
.single-product input{
    width: 50px;
    height: 40px;
    padding-left: 10px;
    font-size: 20px;
    margin-right: 10px;
    border: 1px solid #000;
}
input:focus{
    outline: none;
}
.col-2 img{
    border: 1px solid #555;
}
.single-product .fa{
    color: #ff523b;
    margin-left: 10px;
}
.small-img-row{
    display: flex;
    justify-content: space-between;
}
.small-img-col{
    flex-basis: 24%;
}

The issue at hand:

  1. I would like the border to disappear if there is no image present.
  2. If there is no image, I want the padding to remain unchanged.
htmlcss

Answer №1

Take a look at the CSS code provided below for some guidance.

.single-product{
    margin-top: 80px;
}
.single-product .col-2 img{
    padding: 0;
    cursor: pointer;
}
.single-product .col-2{
    padding: 20px;
    position: relative;
}
.single-product h4{
    margin: 20px 0;
    font-size: 22px;
    font-weight: bold;
}
.single-product select{
    display: block;
    padding: 10px;
    margin-top: 20px;   
}
.single-product input{
    width: 50px;
    height: 40px;
    padding-left: 10px;
    font-size: 20px;
    margin-right: 10px;
    border: 1px solid #000;
}
input:focus{
    outline: none;
}

.col-2 img[src*=".jpg"] {
    border: 1px solid #555;
}
.col-2 img[src=""] {
    border: none;
    padding: 30px; /*use your required custom padding here*/
}
.single-product .fa{
    color: #ff523b;
    margin-left: 10px;
}
.small-img-row{
    display: flex;
    justify-content: space-between;
}
.small-img-col{
    flex-basis: 24%;
}
<div class="small-container single-product">
  <div class="row">
      <div class="col-2">
          <img src="https://via.placeholder.com/300.jpg/09f/fff" width="100%">
          <div class="small-img-row">
              <div class="small-img-col">
                  <img src="https://via.placeholder.com/150.jpg/09f/fff" width="100%">
              </div>
              <div class="small-img-col">
                  <img src="https://via.placeholder.com/150.jpg/09f/fff" width="100%">
              </div>
              <div class="small-img-col">
                  <img src="https://via.placeholder.com/150.jpg/09f/fff" width="100%">
              </div>
              <div class="small-img-col">
                  <img src="" width="100%">
              </div>
          </div>
      </div>
      </div>
      </div>

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

What is the best way to enhance the appearance of a list item that includes a visited hyperlink?

Currently, I am utilizing Stylebot in Chrome to modify certain styles on a webpage that I frequently browse. My goal is to conceal elements in a list that have links I have already visited. For instance, there is a <tr> with the class table-row, and ...

csscss-selectors

Automated HTML loader

I have a webpage that utilizes AJAX to load portions of HTML content. These fragments contain images, some of which are specified in a separate CSS file using background-image properties. I am trying to implement a pre-loader so that the loaded content w ...

htmlajaximagepreloader

Creating a modal popup when a button is clicked

After searching online for a way to make my sign up modal pop up when the signup button in my navbar is pressed, I was unable to find any information on how to achieve this. I suspect it involves JavaScript, but my knowledge of JS is limited. I attempted ...

javascripthtmlcssbootstrap-5

defiant underscore refusing to function

I'm currently working on a text editor, but I'm facing an issue with the remove underline functionality that doesn't seem to be working as expected. For reference, you can check out a working code example here: jsfiddle Below is the part of ...

javascripthtmlcssunderline

Is there a way to refresh the animation on dougtesting.net?

I'm working with the dougtesting.net library to create a spinning wheel. I've been trying to figure out how to reset the animation once it finishes, but I can't seem to find any information on it. My goal is to completely clear all states so ...

javascripthtmljquerycssvue.js

Seeking assistance in developing a dynamic footer complete with a gallery of images

Attempting to create a footer packed with images but struggling to ensure it looks good on both PCs and mobile devices. The goal is to align the bronze sponsor kitten to the left, and supporter kittens to the right, while keeping the footer at a reasonabl ...

htmlcss

Tips for adjusting CSS font sizes within a contenteditable element?

I am looking to develop a compact HTML editor using JavaScript that allows me to customize the font-size of selected text with a specific CSS value. The documentation states that the FontSize command is used like this: document.execCommand("FontSize", fal ...

javascripthtmlcontenteditable

Click Function for Modifying the Content of a Popup Window

I'm a beginner in JavaScript and I need help figuring out how to achieve the following task. Essentially, my goal is to have lines of code like this: <a onclick="JavascriptFunction(0000000)"><img src="image1.png"></a> The number w ...

javascripthtmlcsspopup

Is there a way to seamlessly inject a stylesheet into a React application without causing any flickering or reloading on the website?

In my React application built with next.js, I am fetching a stylesheet via a GET request and appending it to the webpage. However, whenever this stylesheet is loaded in, the elements impacted by it re-render unnecessarily, even if there are no actual chang ...

javascriptcssreactjsstylesheetnext.js

Ways to make a div fill the whole screen and allow for scrolling as well

Issue I'm facing an issue with the login.php screen and the addphoto.php screen. I want these screens to cover the entire page, but despite using the following code: .login-screen, .form-screen { position: fixed; top: 0; left: 0; disp ...

htmlcss

Guide to showing video files stored in a folder on a PHP template

I am working on a project similar to the functionality of this website: As you can see, when you click on any video, it takes you to the same page with the video playing being the only difference. I want to implement this feature on my website as well. ...

phphtmlget

Fluidity in CSS Video

I'm currently working on developing a dynamic video display component for my personal portfolio website. The main concept involves showcasing a mobile application video placed on top of a phone mockup within a designated container. My challenge lies ...

htmlcss

Positioning the horizontal menu and footer links to the right side of the page

Struggling to get my menu and footer links aligned all the way to the right of the page. Here's what it currently looks like http://prntscr.com/32snbr, and this is the desired alignment http://prntscr.com/32snrm I've shared the HTML code below, ...

csshtmlhtml-listsfooter

Activate the textbox without utilizing `.focus()` method

I am encountering an issue with a small iframe on my page. The content within the iframe is larger than the window itself, requiring users to scroll around to view it in its entirety. Within this iframe, there is a button that, when clicked, triggers an an ...

javascriptjqueryhtmlformsiframe

Shadows on menu buttons transform when clicked using React and CSS

I'm currently working on customizing the styling of a menu using CSS in a project that involves the use of "react-horizontal-scrolling-menu". While I've been successful in styling the menu items with .menu-item:hover & .menu-item:active, I am ...

javascriptcssreactjsstylesmenuitem

Is there a way to right-align the labels and input fields simultaneously?

Is there a way to line up the labels and inputs on the right side so they all appear in the same row? .radioContainer{ width: fit-content; margin: 5px; margin-top: 20px; background-color: aqua; padding-bottom: 25px; } <div class=" ...

htmlcss

Creating a dynamic list structure using <ul> and <li> tags in a CSHTML ASP file

I am aiming to design a visually appealing structure using ul li for categories. Each line of the structure should consist of three elements: <li> <ul class='kwicks kwicks-horizontal'> <li></li><li></l ...

htmlasp.net

Unable to locate a selenium-recognized element within this field

I've attempted to use FindElementByName but I keep getting a no such element error when it should recognize this name. What am I overlooking? This issue is occurring on the website Intacct.com. Despite my efforts, I have been unable to find a unique C ...

cssexcelvbaseleniumweb-scraping

Styling is applied by Bootstrap to inputs in a form that are not required

I am currently working on validating a form for empty fields using Bootstrap. When submitting and validating the form with the form.checkValidity() method, I noticed that even the non-required fields are being styled as if they are required. Is this normal ...

javascripthtmlbootstrap-4

Tally the quantity of data points within jQuery Datatables

Upon navigating to my jQuery DataTable, I aim to showcase the count of Users pending activation. Typically, I would use fnGetData with (this), but since I am not triggering this on a click event and wish to count all entries in the table, I am unsure of ho ...

javascriptjqueryhtmlajaxdatatables