Mobile version - images wrong size

Site URL: https://www.supersizesocial.com/powerlikes-demo/

I am making a simple landing page without a navigation bar. It just has our company logo at the top. On Desktop it looks pretty good, the logo is not to big and set off to the top left of the screen. However, on mobile it is very large! 

The way I made the logo small and on the top left was by uploading it as an image, then putting a spacer to the right of it and stretching the spacer all the way across to the left so the logo shrinks down as it is pushed to the far left. If you open the page on desktop and slowly shrink your browser, you'll see at some point the logo suddenly gets really big and centred. 

Can anyone help me resolve this? Perhaps some basic CSS is required, I unfortunately know almost nothing about CSS

Any help would be greatly appreciated!

On 9/8/2021 at 11:56 PM, supersizesocial said:

Site URL: https://www.supersizesocial.com/powerlikes-demo/

I am making a simple landing page without a navigation bar. It just has our company logo at the top. On Desktop it looks pretty good, the logo is not to big and set off to the top left of the screen. However, on mobile it is very large! 

The way I made the logo small and on the top left was by uploading it as an image, then putting a spacer to the right of it and stretching the spacer all the way across to the left so the logo shrinks down as it is pushed to the far left. If you open the page on desktop and slowly shrink your browser, you'll see at some point the logo suddenly gets really big and centred. 

Can anyone help me resolve this? Perhaps some basic CSS is required, I unfortunately know almost nothing about CSS

Any help would be greatly appreciated!

Hi,

Add to Design > Custom CSS

/* resize mobile logo */
@media screen  and (max-width:767px) {
div#block-yui_3_17_2_1_1631108394982_7909 {
    width: 50%;
    margin: 0 auto;
}
}