Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
zhanamitkova

Resizing image and text on footer on mobile to appear smaller

Question

10 answers to this question

Recommended Posts

  • 1

@zhanamitkova Here is the code to target mobile devices only - Note the 640px is the breakpoint for when it determines the screen is in mobile. Check your mobile breakpoint in your style editor and use the px value here.

/* Resize footer images */
 @media screen and (max-width: 640px) {

footer .sqs-image .sqs-image-content img, footer .image-block {

    transform: scale(0.5)

}}

/* Resize text on mobile */

 @media screen and (max-width: 640px) { #block-yui_3_17_2_1_1581506136944_9324 {

font-size: 12px

}}

Note the font size I have entered is just an example so play around with it - I think the #block I am targetting is your text box. Let me know if this works?

Green = You can alter these figures to work for your website.

Share this post


Link to post
  • 0

Not sure if this will work, but some code I had from one of my sites. 

Assuming they are image blocks you wan't to reduce - Note, you may need to alter other things this just makes them smaller on the page.

 

/* Resize footer images */
  footer .sqs-image .sqs-image-content img, footer .image-block {

    transform: scale(0.5)

 

Share this post


Link to post
  • 0
Posted (edited)

@Thurstings 

This actually works but it changes the size both on mobile and desktop, and I only want to change it for mobile. How can I do that?

Is it also possible to make the text "@ZHANA MITKOVA 2020" smaller on mobile ? And is there a way to make both (the AOI member image and @ZHANA MITKOVA 2020) appear closer to each other, so that it looks more compact on mobile?

Thanks again!

Cheers,

Zhana

PS : I like the way it displays on desktop https://zhanamitkova.com/ but here's a screenshot from the mobile version:

image.png.4fb49ffb9a96e70fcf5f46df15e292b5.png

Edited by zhanamitkova

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...