delete the image class from the thumbnail for small devices

Currently, I have a thumbnail gallery set up with different size .img-circles on .img-thumbnails for the lg, md, and xs widths in Bootstrap. However, I am facing an issue where I need to remove the .img-circle class only for the sm screen width while keeping the .img-thumbnail class intact.

Below is a snippet of the HTML code:

<div class="row">
    <div class="col-md-3 col-sm-3 col-xs-6 thumb">
        <a class="thumbnail" href="#">
            <img src="img/dirk_avatar_thmb.png" class="img-responsive img-circle">
        </a>
    </div>
</div>

I've attempted using media queries without any success so far, as I'm still fairly new to it. Do you have any advice or suggestions?

htmlcssmedia-queriestwitter-bootstrap-3

Answer №1

Kindly make use of this specific stylesheet

@media (min-width: 768px) and (max-width:969px) {
.img-circle {
border-radius: 0;
}
}

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 remove the bullets adjacent to my Twitter feed?

Greetings! I am currently working on a homepage with a Twitter feed, but I am struggling to remove the bullets. Despite my efforts to find the correct CSS code (inputting "list-style-type: none;"), I have been unsuccessful. I've spent quite some time ...

csswordpress

Update the button color to transform it from a dull grey when disabled to a vibrant shade

I am trying to modify the button color in my script from grey to green when it transitions from disabled to enabled status. Despite using both the disabled and enabled properties in my CSS and incorporating vue.js (which I am not very familiar with), the c ...

htmlcssvue.js

Guide on customizing the checkbox label class upon @change event in Vue?

Query: I have a list of checkboxes connected to an array of names. The objective is to alter the class of a specific name when its checkbox is clicked. Issue: Clicking on a checkbox causes all names to change class, instead of only affecting the one ass ...

javascriptcssvue.js

unique hyperlink to an external style sheet

element, I came across this line in the header of a web page that was generated by a program. Any thoughts on what significance the number and ID serve in this stylesheet link? <link rel="stylesheet" type="text/css" href="css/contact.css?4131768016" ...

htmlcsscaching

When the input field is cleared, JavaScript will not be able to recognize its contents

Having an issue with my function that fetches results, <script language="javascript"> function fetchResult(value){ url="ajax_fetch.php?st=usr&q="+value; ajax(url); } fetchResult(" "); </script&g ...

javascriptphphtml

Unable to modify the value of an HTML dropdown list

My latest project is a website located at pg.wcyat.me (Source code), where I utilized github.com/thdoan/pretty-dropdowns for dropdown menus. Using JavaScript, I am able to dynamically change the values of select lists. For example: document.getElementById( ...

javascripthtmljqueryhtml-select

What is the best way to allow wider list items to overflow their absolutely positioned container?

My challenge involves a list that is dynamically populated, and I require it to be wider than its absolutely-positioned parent (specifically a custom <select> element implementation). #wrapper { position: relative; border: 1px ...

htmlcssinternet-explorer-11

What is the best way to navigate to the top of a form panel?

I'm currently developing a Sencha Touch mobile app. I have a form panel with multiple fields, so I made it scrollable. However, every time I open the screen (panel), scroll down, navigate to other screens, and then return to the form panel, it stays s ...

javascriptjqueryhtmlcsssencha-touch

Error message occurs when attempting to use the ->num_rows function on inner join statement and accessing a property of a non-object

I am attempting to fetch both Product_Name from the product table and Order_Date from the order table, but I keep encountering an issue at line 35 mentioning the "num_rows line". <?php $servername = "localhost"; $username='root'; $password = ...

phphtmlmysqlmysqli

Creating a blur effect on an image tag when hovering using CSS and HTML

I am currently developing a Portal website for one of my classes, and the template provided by my professor utilizes the <picture> tag to adjust images depending on the browser's size. My goal is to add a blur effect and darken the image while d ...

htmlcss

Incorrect Zooming Behavior in HTML and CSS

Currently, I find myself on a website layout where the banner remains fixed at the top of the page while allowing scrolling for the inner div. However, when I zoom in using the browser (ctrl+'+'), the banner overflows the container without making ...

htmlcss

I attempted to create an image using the open ai api from delle, but encountered an error in the process

Snippet: import { useState } from "react"; import axios from "axios"; function App() { const [prompt, setPrompt] = useState(""); const [result, setResult] = useState(null); // Starting result as null const [ ...

htmlreactjsnode.jstailwind-css

Jquery Triggers Failing to Work Following Ajax Request

I have worked on 2 PHP pages, called "booking.php" and "fetch_book_time.php". Within my booking.php (where the jquery trigger is) <?php include ("conn.php"); include ("functions.php"); ?> $(document).ready(function(){ $(".form-group"). ...

javascriptphphtmljqueryajax

What steps should I take to design and implement this basic search form?

Essentially, I have a three-page setup: - One page containing all possible search results such as: 'search result 1' 'search result 2' 'search result 3' - Another page with a search form and enter button. - And finally, a res ...

phpjavascriptjqueryhtml

"Enhancing User Experience with Multiple Conditional Checkboxes in jQuery

Having difficulty making a checkbox change some HTML content using JQuery. There is a standard html checkbox with the following attributes <input type="checkbox" name="AQN1" class="checkbox Q1" value="AQN10" id="3mcq"> <input type="checkbox" nam ...

javascriptjqueryhtml

Developing an interactive web interface with HTML

I've been attempting to design a flexible HTML page that replicates the layout of a Java applet clock, but I'm unsure if my current approach is correct. Below is an example of the three-clock image set that I am currently working on. My method i ...

htmlcsslayout

Is there a way to transform JSON into HTML with PHP?

I am attempting to reverse engineer the function referenced in this discussion: [Post][1] [1]: https://stackoverflow.com/a/23427469/19867306 @scozy demonstrated a function for converting HTML text to a JSON model. Now, I need to convert the same JSON mode ...

phphtmljson

Setting an ElementImpl property explicitly in EMF/GMF/Papyrus outside of the code

I am working with an EMF-model and its generated editor. In this model/editor, there is a connection between Element "Unit"(U) and "Specification"(S). My goal is to have a specific CSS style for S if at least one U satisfies S. Unfortunately, I have not fo ...

javacsseclipse-emfeclipse-gmfpapyrus

Spree Deluxe - Customizing color scheme variables

We're struggling to modify the color variables in Spree Fancy. The documentation suggests creating a variables_override.css.scss file. But where exactly should this file be placed? We've tried adding it under the stylesheets folder in assets and ...

cssruby-on-railssassspree

What could possibly be causing this element to shift side to side (in IE only) during the CSS animation?

UPDATE: Issue occurring on Internet Explorer 10, Windows 7 When using the transform property to adjust the horizontal position of an element during animation, the vertical value is updated as well. However, despite setting the horizontal value to the same ...

javascripthtmlcsscss-animations