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

Removing the Margin of an image for Mobile View

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

Share this post


Link to post

14 answers to this question

Recommended Posts

  • 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;
    }
  }

 


I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---

https://www.freelancer.com/u/BaNgan

Share this post


Link to post
  • 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>

 


I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---

https://www.freelancer.com/u/BaNgan

Share this post


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

Share this post


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>

 


I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---

https://www.freelancer.com/u/BaNgan

Share this post


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


I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---

https://www.freelancer.com/u/BaNgan

Share this post


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

 

Share this post


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?

 

 

Share this post


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

 

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


I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---

https://www.freelancer.com/u/BaNgan

Share this post


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

Share this post


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.


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


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


I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---

https://www.freelancer.com/u/BaNgan

Share this post


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 🙂

Share this post


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


I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---

https://www.freelancer.com/u/BaNgan

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