Resize specific image for mobile view

Site URL: https://terrier-plane-hgbb.squarespace.com/portfolio

Hi,

I been trying all day with different code to resize specific images on the portfolio page for mobile view. This is one of the codes I try but having no luck. It's driving me insane as I am usually can figure it out. I'm not sure what I'm doing wrong. I would greatly appreciate any help or link. 

/* CSS FOR TABLET AND MOBILE */
@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/

/* Insert Code for Mobile Above This Line */
}

33 minutes ago, lfang2 said:

Site URL: https://terrier-plane-hgbb.squarespace.com/portfolio

Hi,

I been trying all day with different code to resize specific images on the portfolio page for mobile view. This is one of the codes I try but having no luck. It's driving me insane as I am usually can figure it out. I'm not sure what I'm doing wrong. I would greatly appreciate any help or link. 

/* CSS FOR TABLET AND MOBILE */
@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/

/* Insert Code for Mobile Above This Line */
}

 

For this section (screenshot desktop; couldn't screenshot both in mobile)

Ah I figure it out lol Turn out it was an Sqaure space view bug. :x The code works. 

@tuanphan Hi! Thank you for looking at my post. lol

Now I'm having issues with creating an anchor link to scroll to specific section on my page. Everytime I click on it all it does is scroll to the top. I use this code that you posted I found on another similar issue.

Quote

 <ul class="tp-float-buttons">
        <li><a href="#research">Research</a></li>
        <li><a href="#ideation">Ideation & Lo Fi</a></li>
        <li><a href="#">Evaluation & Iteration</a></li>
        <li><a href="#">Hi-Fi Design</a></li>
        <li><a href="#">Doucmentation</a></li>
</ul>
<style>
ul.tp-float-buttons {
    position: fixed;
    top: 50%;
    right: 10px;
    z-index: 999;
    list-style: none;
    padding-left: 0;
    margin: 0;
}
ul.tp-float-buttons a {
    color: cornflowerblue;
    background-color: transparent;
    padding: 24px;
    margin-bottom: 10px !important;
    display: right-block;
    min-width: 100px;
    text-align: right;
}
</style>

Than I assigned a <div id=“anchor”></div>. Plus I would love the stick nav to start at the Ideation section. Is there a way around it? Would appreciate your help! Thank you.

password (lowercase)
leslie

I end up removing the links I created because it was showing on the top nav. 

Update:

I FIXED IT WITH. It only took me all day lol!!!! so happy.

<p id="enroll"></p>

html {
  scroll-behavior: smooth !important;
}