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

Removing the Margin of an image for Mobile View


Dtcforce
Go to solution Solved by bangank36,

Question

Site URL: http://dtcforce.com

Hi,

I have built my website on squarespace 7.1.

For some reason the images on the homepage the margin is going beyond the screen because of this the screen in mobile is moving to the right when navigating

Attached is an image for reference 

Margin of the images.jpg

Link to post
  • Answers 14
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

Sorry I picked thr wrong id #block-yui_3_17_2_1_1589030188217_12991 { width: 100px; position: relative; left:85px; } @media only screen and (max-width: 768px) { #page-sectio

I used Lightshot app

Posted Images

14 answers to this question

Recommended Posts

  • 0
35 minutes ago, Dtcforce said:

Site URL: http://dtcforce.com

Hi,

I have built my website on squarespace 7.1.

For some reason the images on the homepage the margin is going beyond the screen because of this the screen in mobile is moving to the right when navigating

Attached is an image for reference 

Margin of the images.jpg

I tried to fix it

https://prnt.sc/szxjxk

<style>
  #yui_3_17_2_1_1592209946118_113 .image-block {
    left: 0;
    margin: 0 auto;
  }
</style>

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
10 minutes ago, bangank36 said:

<style> #yui_3_17_2_1_1592209946118_113 .image-block { left: 0; margin: 0 auto; } </style>

Where do I add this? 

In custom CSS I have added this  for the implementation image:

#block-yui_3_17_2_1_1589030188217_12991{width: 100px; position: relative; left:85px;
@media only screen and (max-width:950px){position: relative; left:100px}}

Link to post
  • 0
8 minutes ago, Dtcforce said:

Where do I add this? 

In custom CSS I have added this  for the implementation image:

#block-yui_3_17_2_1_1589030188217_12991{width: 100px; position: relative; left:85px;
@media only screen and (max-width:950px){position: relative; left:100px}}

In the custom css, if you want to specifically place it smaller screen, then replace the code of yours with

<style>
  #block-yui_3_17_2_1_1589030188217_12991 {
    width: 100px; 
    position: relative; 
    left:85px; 
  }
  @media only screen and (max-width: 768px) {
    #yui_3_17_2_1_1592209946118_113 .image-block {
      left: 0;
      margin: 0 auto;
    }
  }
</style>

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
10 minutes ago, Dtcforce said:

Where do I add this? 

In custom CSS I have added this  for the implementation image:

#block-yui_3_17_2_1_1589030188217_12991{width: 100px; position: relative; left:85px;
@media only screen and (max-width:950px){position: relative; left:100px}}

If you are already in custom css code section, you can remove the style tags

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
9 minutes ago, bangank36 said:

In the custom css, if you want to specifically place it smaller screen, then replace the code of yours with


<style>
  #block-yui_3_17_2_1_1589030188217_12991 {
    width: 100px; 
    position: relative; 
    left:85px; 
  }
  @media only screen and (max-width: 768px) {
    #yui_3_17_2_1_1592209946118_113 .image-block {
      left: 0;
      margin: 0 auto;
    }
  }
</style>

 

image.png.70d96ae76b21f862ca9f86f9e13359d9.png

 

Link to post
  • 1
25 minutes ago, Dtcforce said:

image.png.70d96ae76b21f862ca9f86f9e13359d9.png

 

Sorry I picked thr wrong id

#block-yui_3_17_2_1_1589030188217_12991 {
    width: 100px; 
    position: relative; 
    left:85px; 
  }
  @media only screen and (max-width: 768px) {
    #page-section-5ee19a70b8f78712728f4917 .image-block {
      left: 0 !important;
      margin: 0 auto;
    }
  }

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
17 minutes ago, bangank36 said:

Sorry I picked thr wrong id


#block-yui_3_17_2_1_1589030188217_12991 {
    width: 100px; 
    position: relative; 
    left:85px; 
  }
  @media only screen and (max-width: 768px) {
    #page-section-5ee19a70b8f78712728f4917 .image-block {
      left: 0 !important;
      margin: 0 auto;
    }
  }

can apply this to the whole mobile screen page?

 

 

Link to post
  • 0
6 minutes ago, Dtcforce said:

 

I used the max-width: 768px, you can change it per your mobile screen settings

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
6 minutes ago, bangank36 said:

I used the max-width: 768px, you can change it per your mobile screen settings

No I meant how can I apply this margin settings to every mobile image

Link to post
  • 0

I suggest you find the section id via inspector

https://prnt.sc/szzfql

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
8 minutes ago, bangank36 said:

I suggest you find the section id via inspector

https://prnt.sc/szzfql

I wonder how you can take screenshot Chrome Dev?

I also use the Lightshot extension, and it seems that it can't capture Dev Tools

Thank you.

Link to post
  • 0
10 minutes ago, tuanphan said:

I wonder how you can take screenshot Chrome Dev?

I also use the Lightshot extension, and it seems that it can't capture Dev Tools

Thank you.

I used Lightshot app

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

Sorry I picked thr wrong id

#block-yui_3_17_2_1_1589030188217_12991 {
    width: 100px; 
    position: relative; 
    left:85px; 
  }
  @media only screen and (max-width: 768px) {
    #page-section-5ee19a70b8f78712728f4917 .image-block {
      left: 0 !important;
      margin: 0 auto;
    }
  }

Thank You bangank36 🙂

Link to post
  • 0
2 minutes ago, Dtcforce said:

Sorry I picked thr wrong id


#block-yui_3_17_2_1_1589030188217_12991 {
    width: 100px; 
    position: relative; 
    left:85px; 
  }
  @media only screen and (max-width: 768px) {
    #page-section-5ee19a70b8f78712728f4917 .image-block {
      left: 0 !important;
      margin: 0 auto;
    }
  }

Thank You bangank36 🙂

You're welcome, appriciate if the answer is marked as solved

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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...