Issues with responsiveness of images on Squarespace website

Check out my friend's website that was created using Squarespace: www.diamondathome.com.

The site is designed to be mobile responsive, but there seems to be an issue with the Facebook and Linkedin icons at the top of the homepage. They appear too large on mobile browsers and are not scaling properly.

I've tried various adjustments by adding custom CSS, but nothing seems to fix the problem.

If anyone has any suggestions or ideas on what might be causing this issue, I would greatly appreciate it!

Thank you in advance!

- Scott

cssimagemobile

Answer №1

This solution should do the trick:

@media only screen and (max-width: 640px) {
.sqs-gallery-design-grid-slide {
width: 45px !important;}

img.thumb-image.loaded {
width: 25px !important;
height: 25px !important;
}
}

If you can modify the CSS file within Squarespace, locate this code snippet in site.css. Otherwise, create a new CSS file and insert it there.

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

I am having trouble understanding why dropdown menus with the same content have varying widths

My issue is illustrated in the screenshots below: first-dropdown: second-dropdown: The second dropdown appears slightly wider on the right side. Despite Google Chrome's claim that the widths are the same. HTML code: <div class="row menu"> ...

htmlcsstwitter-bootstrap

Utilizing local storage, store and access user's preferred layout options through a click function

Exploring the realm of localstorage for the first time, I am considering its use to store a specific ID or CLASS from my css file. This stored information would then be utilized to render a selected layout (grid/list) in the user's browser upon their ...

javascriptjqueryhtmlcsslocal-storage

Alternate CSS options for controlling printing besides page-break-after and page-break-before

I am in the process of creating a web interface for printing barcodes on Avery label sheets. How can I ensure that the barcodes align perfectly on each label, using measurements like inches or centimeters? And most importantly, how do I prevent the barcode ...

javascripthtmlcssprinting

Using jQuery: If the URL includes a specific string, then modify the background color of a particular tag

I need to dynamically change the background color of a tag in my code based on the URL. If the URL contains Suisse, I want the background color of the tag #switch-univers li a.bilgroup to be green. JS if (window.location.href.indexOf("Suisse") > -1) { ...

javascriptjquerycssbackground-color

Is CSS causing a overflow when trying to print 210mm by 297mm on A4?

Take a look at this basic HTML code : <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> .page { width: 200px; height: 500px; background ...

htmlcssprinting

Click on a custom marker on Google Maps to reveal a pop-up info window with more details

I have successfully created a personalized Google Map using Custom Markers. Now, I am looking to incorporate Info Windows for each marker. The code for the Custom Markers can be found at: https://developers.google.com/maps/documentation/javascript/custom- ...

javascriptjqueryhtmlcssgoogle-maps

Can two sibling elements collaborate and influence each other?

Imagine having two elements in your website, named "A" and "B". You want to create a unique interaction where hovering over A changes the color of B, and hovering over B changes the color of A. <ul> <li>A</li> <li>B</li& ...

csscss-selectors

A centered Bootstrap navigation bar on a WordPress site

My Bootstrap navbar is floating in the center on WordPress and I'm not sure why. Can anyone help me with this issue? Could it be related to WordPress or my stylesheet problems? (Will update my code here if you need) https://i.sstatic.net/vxVv4.jpg ST ...

phphtmlcsswordpresstwitter-bootstrap

Having an issue with my Wordpress theme where the footer doesn't remain at the bottom of the page

Having trouble with my custom Wordpress theme that I can't seem to fix. Despite extensive research, the footer on my website refuses to stay at the bottom of the page and instead floats in the middle of posts and static pages. I've tried all sol ...

phphtmlcsswordpressweb

Creating a visually engaging parallax effect in two columns with differing lengths that align perfectly at the conclusion

Recently, I came across an interesting layout technique on Apple's website that involves two columns with different lengths. As you scroll down the page, one column slows down to align with the other so that they both meet at the bottom. You can chec ...

jquerycsshtmltwitter-bootstrapparallax

Button from Bootstrap extends beyond the page on mobile devices

I am facing an issue with my button. It looks great on desktop, but when I switch to the mobile version, it goes beyond the screen width like in the image below: https://i.sstatic.net/69Zbs.png 1) How can I prevent this from happening with the code provi ...

htmlcsstwitter-bootstrap

HTML5 input placeholder adapts its size and position dynamically as data is being

During my interaction with the input fields on my bank's website, I noticed that the placeholder text undergoes a unique transformation. It shrinks in size and moves to the upper-left corner of the input field while I am entering information. Unlike t ...

javascriptjquerycsshtml

Ensure that all content in the table rows remains visible, even in a table with unusually lengthy cells

My HTML table is structured like this: +-------------+-------------+----------+ | Single line | Single line | Very, | | | | very | | | | long | | | | text, | | ...

javascriptjqueryhtmlcss

When using androidx.appcompat.widget.AppCompatEditText, the output I receive is different from the number I initially entered

Check out my Github repository for the ArtBookTesting project: https://github.com/Berkayszk/ArtBookTesting/blob/master/app/src/main/java/com/example/artbooktesting/viewmodel/ArtViewModel.kt In my art recording application, I am encountering an issue with ...

javaandroidkotlinmobiledeveloper-tools

Is the CSS3 bar chart flipped?

I'm currently developing a responsive bar chart, and everything seems to be going smoothly except for one issue - when viewing it in full screen, the bars appear to be flipped upside down. It's quite puzzling as all other elements such as text an ...

htmlcssbar-chart

The HTML email appears distorted on Yahoo and Outlook, but displays correctly on all other platforms

Basically, I have an HTML email that was converted from a PSD file. I sliced the layers, made some changes to the URLs, and did a test email. The email looks fine on most email clients, but when I send it to Yahoo Mail or Hotmail/Outlook and open it in Chr ...

htmlcssemail

Guidelines for utilizing the php mail() function

It seems that there is an issue with this code when running it on a local host versus a live server. I am attempting to use this code for a mail function, which works on another site but not on this one. I know the code will produce an error on localhost ...

phphtmlcssbootstrap-5

scraping text content from a CSS node using Scrapy

My goal is to extract a catalog ID number from the following webpage: from scraping.selector import Selector from scraping.http import HtmlResponse url = 'http://www.enciclovida.mx/busquedas/resultados?utf8=%E2%9C%93&busqueda=basica&id=& ...

pythoncssscrapy

Numerous textareas fail to function properly according to JQuery's standards

Need help with resizing multiple textarea elements dynamically as the user types in them (on the Y-axis). Currently, I have code that successfully resizes a single textarea, but it does not work when there are multiple textareas on the page. Here is the c ...

javascriptjqueryhtmlcss

What is the mechanism through which Material Icons determine the appropriate icon to display according to the element's content?

Can anyone explain how the icons in this specific structure function? <span class="material-icons"> accessibility_new </span> I've been exploring the Material Icons repository in an attempt to comprehend how the icon is displ ...

htmlcssfontsmaterial-designgoogle-material-icons