Reduce the size of the profile picture in the Facebook like box

I have a Facebook like box on my site but in some resolutions the profile pictures goes to next line after 2 pictures instead of 3 so I want to make the profile pictures width and height 49 instead of 50 because that would fix the problem.

Here's how it looks in with lower resolutions: https://i.sstatic.net/1GW7N.png

And here's how its supposed to look https://i.sstatic.net/5aD4k.png

So how can I reduce the pictures width and height by 1px with either JavaScript or CSS?

<div class="fb-like-box" data-href="facebookpage" data-width="180" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
javascripthtmlcssfacebookfacebook-like

Answer №1

Insert the following code snippet into your CSS stylesheet

.social-media-widget img {
    height: 49px !important;
    width: 49px !important;
}

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

Achieving a sidebar that remains full height with CSS

Currently working on this page () where my aim is to create a sidebar that fills the entire height of the screen. The goal is for the sidebar, along with the black line on its right, to always reach the bottom of the viewport. JSFiddle Link Here's t ...

htmlcss

JavaScript - Issue with retrieving object properties accurately

Here is a code snippet that I am working with: function retrieveObjects(name, data) { return data.filter(function(d) { return name.title == d.title; }).map(function(d) { return { "title": d.title, "sort": d. ...

javascriptarraysnode.js

Steps to make ng-packagr detect a Typescript type definition

Ever since the upgrade to Typescript 4.4.2 (which was necessary for supporting Angular 13), it appears that the require syntax is no longer compatible. Now, it seems like I have to use this alternative syntax instead: import * as d3ContextMenu from ' ...

javascriptangulartypescriptd3.jsng-packagr

Ways to update HTML content generated by Ajax

Having some difficulties modifying the HTML content generated by AJAX. This is the code snippet from the page: @model IEnumerable<WE_SRW_PeerNissen.Models.Reservations> @{ ViewBag.Title = "List"; Layout = "~/Views/Shared/_Layout.cshtml"; } ...

javascriptjqueryhtmlajax

Integrating Python with MySQL and HTML

My project involves reading data from a GSM modem and storing it in a MySQL database using a Python script. Now, I want to create a front end for this process using an HTML file with a specific design in mind. The Python script acts as the backend in t ...

pythonhtmlmysql

Utilizing an overlay to conceal both the body content and the input fields

I have a website that includes a sliding overlay div which triggers when the user exits a specific area. To showcase this, I created a demonstration on jsfiddle. http://jsfiddle.net/qxcd8y1L/ <body class="overlay"> <input> </body> ...

jqueryhtmlcss

Tips for retrieving a variable from a $.getJSON function

My question is similar to this one: How can I return a variable from a $.getJSON function I have come across several duplicates on Stack Overflow, but none of them provided a satisfactory answer. I understand that $.getJSON runs asynchronously, and I hav ...

javascriptjqueryajaxjsonasynchronous

Guide on extracting a JavaScript string from a URL using Django

How can I extract "things" from the JavaScript URL "/people/things/" without any unnecessary characters? I've attempted inefficient methods like iteration, but struggle with removing the undesired parts of the string, leading to slow performance. Th ...

javascripthtmldjangourl

Transferring a variety of PHP arrays to JavaScript upon successful AJAX completion

Struggling with passing arrays from a PHP page to JavaScript using AJAX requests. I need to transfer data from multiple PHP arrays to JavaScript and although I understand that json_encode can be used for this purpose, I'm finding it difficult to imple ...

phpjavascriptajax

showing information from a PHP page within a specific div container

After countless attempts and research, I find myself struggling to achieve the desired outcome. It's frustrating! Here's the situation: I have a PHP page named index2.php, which contains a script that fetches a balance for me through rpc. The ou ...

phpjqueryhtmlajax

I recently attempted a meyers reset and now I'm struggling to get my unordered list to display in a horizontal layout

Check out my code snippet below: .navbar-container { width:100%; display:inline-block; } ul { list-style-type: none; display: inline; } <div class="navbar-container"> <ul> <li><a href="gmail.com">Gmail</a>& ...

htmlcss

Is there a way to transmit the ENTER key press to the page setup dialog within Internet Explorer 7?

My code is designed to change the page orientation. It functions correctly in IE6, but encounters issues in IE7. Specifically, it stops at %a and fails to input the enter or tab keys needed to press 'OK'. var shell; function SetPrintProperties() ...

javascriptjqueryinternet-explorershellwsh

Error in Typescript: Function expects two different types as parameters, but one of the types does not have the specified property

There's a function in my code that accepts two types as parameters. handleDragging(e: CustomEvent<SelectionHandleDragEventType | GridHandleDragEventType>) { e.stopPropagation(); const newValue = this.computeValuesFromPosition(e.detail.x ...

javascripttypescript

Tips for creating a scrollable smiley input field

I have a chat system where I am incorporating smileys from a predefined list. QUERY I am looking to create a scrolling feature for the smileys similar to how it is implemented on this particular website. The twist I want to add is to have this functiona ...

javascriptjqueryhtml

Tips for navigating the world of hybrid web applications that combine elements of both traditional multi-page applications and single-page

What are some best practices for developing a multi-page application using modern JavaScript frameworks? Multi-page Application In a multi-page application, we utilize multiple templates with "template syntax" to retrieve backend data and handle AJAX (if ...

javascriptangularjsajaxwebpacksingle-page-application

Problem encountered in Vue.js web application when running NPM, resulting in Error 126

When attempting to compile my Vue.js application using the command npm run prod, I encountered the following error: sh: /Users/antoinevandenheste/Downloads/magicfactory-1/node_modules/.bin/webpack: Permission denied npm ERR! code ELIFECYCLE npm ERR! errno ...

htmlvue.jsnpmnpm-install

Having trouble with playing audio from an array in Javascript

I've been working on creating a Drum Kit website. My approach involves using an array to hold all the sound files, and using a loop to call the play() function. However, I encountered an issue when trying to load the sounds - the debug console showed: ...

javascriptloopsaudio

NextJS hot reload with Docker is a powerful combination for seamless development environments

I've encountered issues trying to configure hot reload with Docker and NextJS. When I make changes and save a file, the server does not reload. Below is the contents of the docker-compose.yml: version: '3' services: mainapp: build: ./ ...

javascriptdockernext.js

Resolving the issue of multiple instances of React within a single application

I'm currently working on a React module in my local environment. To link the module, I am using npm link. Although the module is being imported successfully, the hooks inside the module are failing with the following error message: Invalid hook call ...

javascriptreactjsnpmwebpackpackage.json

When double quotes are used in a string within an HTML input field, they may display as &

Using PHP, I am retrieving data from an SQL database and generating JavaScript code to create an edit button for each entry. The edit button triggers a text input field within a form. When the user clicks on the generated edit button, the text in this inpu ...

javascriptphphtmlsql