Jump to content

Resize image in footer for a single page

Recommended Posts

Site URL: https://sandraberenice.com

Hi! I'm designing my personal website and:


1. I resized my submark image to make it more suitable for the mobile version since it was very large. It's in the footer section.

This is the code:

@media screen and (max-width: 640px){
#block-13717a6122b0726c1a38{
  width: 24% !important;
  margin: 0 auto;
  }
}

2. I brought a Tabs plugin but it didn't include any CSS code to adapt it to the mobile version, so I read lots of posts and CSS coding and I did this:

2.1 Applied this into a block code, in the section where I included the tabs: 

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
</div>

2.2 Then applied this in the CSS window:

@media @mobile{
  #block-yui_3_17_2_1_1638158536954_6387{
    h2{font-size:12px; font-weight:bold}
  }
  #block-yui_3_17_2_1_1638158536954_6848{
     p{font-size:16px !important}
   }
}  

@media @mobile{
 .column {
  float: left;
  width: 50%;
  }}

/* Clear floats after the columns */
  #collection-61a44f6b977e6d7ac151a435{
  .row {
  display: flex;
}

.column {
  flex: 50%;
  }
  }

It worked! the Tabs design looks so much better now in mobile, and the code affected the footer on THIS SINGLE PAGE and now looks better. I see it like it's in the desktop version; with three columns, BUT the submark image got too shrinked. I know it's because the CSS. 

I did something wrong. Can someone help me to resize my submark image on this page? 

Thanks for your kind answers!!

 

P.S.

a) the page where I have the Tabs and the image footer problem: #collection-61a44f6b977e6d7ac151a435

b) The block number of the submark image: #block-13717a6122b0726c1a38

c) Website password: sandra (7.1 version)

IMG_5097.PNG

IMG_5098.PNG

Link to comment
  • Replies 1
  • Views 335
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

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


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.