Jump to content

Block position & text block margin on tablet

By ManonLarrieu, in Customize with code

Recommended Posts

ManonLarrieu Level 5

ManonLarrieu

Posted
Posted

Site URL: http://www.qualitycupofcoffee.com/english

Hello !

 I am currently fixing my about section and due to my specific design I did a lot of custom css tweaks for desktop / tablet / mobile view :
1. The round picture with rotating circle along with my bio looks OK on desktop & cellphone as I customized it.
2. On tablet : the space is very narrow thus I am trying to position my round picture (with the rotating text) above my text section. now it looks like my text section at the bottom is still squeezed between invisible margins (?)
I would like my text box to take the "full space"  and be aligned under my round picture. I tried many coding but I cannot unsqueeze it so far. Here is my code:

  

/*tablet screen reposition image & size*/
@media screen and (max-width: 960px) { #block-yui_3_17_2_1_1607363780944_38870 {
  html,
body  {
	height: 100%;
	margin: 0;
}
body {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	background: none;
	overflow-x: hidden;
}
  
.profileimg {

	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 250% !important;
	max-width: 300px;

.image-circle {
position: relative;
			left: 38%;
			padding: 0em 0em;
width: 480% !important;
	max-width: 480px;
}

 img {
			display: block;
			width: 100%;
	}

	.profileimg-label {
		transition: all 0.2s ease-in-out;

		svg {
			position: absolute;
			left: -122.5%;
			top: -200%;
			height: 500%;
			width: 420%;
			pointer-events: none;

			animation-name: rotate;
			animation-duration: 35s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
			

			text {
				font-family: "Maison-Neue-Light";
				font-size: 5.8px;
				letter-spacing: 1.1px;
				font-variation-settings: "wght" 650;
				fill: #393939;
				text-transform: uppercase;
			}
		}
	}
  }
}
}
/*tablet reorder text position*/
@media screen and (max-width: 960px) {#block-yui_3_17_2_1_1607521158463_40762 {
left: -60%;
padding-top: 38em;
padding-left: 100px;
padding-right: 10px;}
}
@media screen and (max-width: 960px) {#block-yui_3_17_2_1_1607521158463_23156 {
display: none;}
}
@media screen and (max-width: 960px) {#block-yui_3_17_2_1_1607425908059_20075 {
left: -60%;
padding-top: 38em;
padding-left: 10px;
padding-right: 10px;

  }
}


I have two others problems :
1. When I visit my website from Chrome I cannot see the text around my picture rotating, meanwhile when I work on my website I can see it rotating with no problem. Is it normal ?

2. I am wondering if THIS code is not affecting my whole website display on desktop, tablet & mobile. I can literally scroll on the left and right of my website. I thought it was my full bleed footer code but I think it's coming from the code I am using from my round picture / rotating wheel.


Thanks a lot, it would be awesome to get untangled in those coding !
Manon
 

  • Replies 7
  • Views 1.5k
  • Created
  • Last Reply
tuanphan Level 18

tuanphan

Posted
Posted

Add to Home > Design > Custom CSS 

@media screen and (max-width:900px) and (min-width:641px) {
div#block-yui_3_17_2_1_1607425908059_20075 {
    left: 0 !important;
    padding-top: 1em !important;
}
div#page-5f04611278b4a5563aeaaaf5 .span-12>.row>.span-6 {
    width: 100%;
}
div#block-yui_3_17_2_1_1607425908059_20075 {
h1 br {
    display: none;
}
}
div#block-yui_3_17_2_1_1607521158463_40762 {
    display: none;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

ManonLarrieu Level 5

ManonLarrieu

Posted
  • Author
Posted

Morning 👋

Sorry for my late reply, I was a bit offline 🙂

I just tried your code, it's amazing, the text is now perfect and my page display is all good on tablet.

I am gonna use your technique to fix my desktop / mobile view !

ManonLarrieu Level 5

ManonLarrieu

Posted
  • Author
Posted

Umm It's very strange :

I tried to do the same on the french version of my website (www.qualitycupofcoffee.com/french) using this code & of course swiping the #block-id but it's not working on tablet : The text is not fully displaying on the screen unlike on the English version you corrected. 

I keep rechecking my code, and I cannot find where the mistake is ... 

- I had to change the value for the left & padding top of your code on the French website. It doesn't really make sense to me as the text English / French are nearly similar

For both version (english / french) I am facing a cellphone / tablet issue like I can scroll on the far right of the screen, also I don't see the text spinning around the picture on both version when I am checking on google chrome 😫


  

/*tablet screen reposition image & size*/
@media screen and (max-width: 960px) { #block-yui_3_17_2_1_1608037247515_6137 {
  html,
body  {
	height: 100%;
	margin: 0;
}
body {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	background: none;
	overflow-x: hidden;
}
  
.profileimg {

	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 250% !important;
	max-width: 300px;

.image-circle {
position: relative;
			left: 38%;
			padding: 0em 0em;
width: 360% !important;
	max-width: 360px;
}

 img {
			display: block;
			width: 100%;
	}

	.profileimg-label {
		transition: all 0.2s ease-in-out;

		svg {
			position: absolute;
			left: -67%;
			top: -200%;
			height: 500%;
			width: 310%;
			pointer-events: none;

			animation-name: rotate;
			animation-duration: 35s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
			

			text {
				font-family: "Maison-Neue-Light";
				font-size: 5.8px;
				letter-spacing: 1.1px;
				font-variation-settings: "wght" 650;
				fill: #393939;
				text-transform: uppercase;
			}
		}
	}
  }
}
}
/*Tablet reorder text position*/
@media screen and (max-width: 960px) {#block-yui_3_17_2_1_1608037247515_21830 {
left: -60%;
padding-top: 38em;
padding-left: 100px;
padding-right: 10px;}
}
@media screen and (max-width: 960px) {#block-yui_3_17_2_1_1608037247515_19847 {
display: none;}
}
@media screen and (max-width: 960px) {#block-yui_3_17_2_1_1608037247515_9008 {
left: -60%;
padding-top: 38em;
padding-left: 10px;
padding-right: 10px;

  }
}
/*Tablet narrow text*/
@media screen and (max-width:900px)  {
div#block-yui_3_17_2_1_1608037247515_9008 {
    left: -40 !important;
    padding-top: 30em !important;
}
div#page-5d2aef2887a3ec000122af56 .span-12>.row>.span-6 {
    width: 100%;
}
div#block-yui_3_17_2_1_1608037247515_9008 {
h1 br {
    display: none;
}
}
div#block-yui_3_17_2_1_1608037247515_21830 {
    display: none;
}
}
/*cellphone size screen*/
@media screen and (max-width: 640px) 
 { #block-yui_3_17_2_1_1608037247515_6137 {
  html,
body  {
	height: 100%;
	margin: 0;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	background: none;
	overflow-x: hidden;
}
  
.profileimg {

	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 250% !important;
	max-width: 300px;

.image-circle {
position: relative;
			left: 5%;
top: -200% !important;
			padding: 2em ;
width: 280% !important;
	max-width: 280px;
}

 img {
			display: block;
			width: 100%;
	}

	.profileimg-label {
		transition: all 0.2s ease-in-out;

		svg {
			position: absolute;
			left: -76%;
			top: -200%;
			height: 500%;
			width: 260%;
			pointer-events: none;

			animation-name: rotate;
			animation-duration: 35s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
			

			text {
				font-family: "Maison-Neue-Light";
				font-size: 5.8px;
				letter-spacing: 1.1px;
				font-variation-settings: "wght" 650;
				fill: #393939;
				text-transform: uppercase;
			}
		}
	}
  }
}
}
/*cellphone reorder text position*/
@media screen and (max-width: 640px) {#block-yui_3_17_2_1_1608037247515_9008 {
left: 2%;
text-align: center;
padding-top: 0em;
  }
}

 

  • 2 weeks later...
ManonLarrieu Level 5

ManonLarrieu

Posted
  • Author
Posted

Hello @tuanphan

Sorry for the late reply, I was on a business trip thus I didn't touch my website at all. OK so I deep dived into it again and :

- I fixed the image & text position on tablet and cellphone

>> Problem : the text is still not rotating when I visit my website on Chrome, meanwhile I can see it rotate in my squarespace editing window.

>> Other MASSIVE problem affecting all my website : I can still scroll on the far right of my website when I am on desktop & mobile view. I am not sure how to fix it. Maybe while playing with that text / image position along with the margin left / right I might have touched something that is affecting my whole website margins ?! 

tuanphan Level 18

tuanphan

Posted
Posted
2 hours ago, ManonLarrieu said:

Hello @tuanphan

Sorry for the late reply, I was on a business trip thus I didn't touch my website at all. OK so I deep dived into it again and :

- I fixed the image & text position on tablet and cellphone

>> Problem : the text is still not rotating when I visit my website on Chrome, meanwhile I can see it rotate in my squarespace editing window.

>> Other MASSIVE problem affecting all my website : I can still scroll on the far right of my website when I am on desktop & mobile view. I am not sure how to fix it. Maybe while playing with that text / image position along with the margin left / right I might have touched something that is affecting my whole website margins ?! 

Try adding to Design > Custom CSS 

html, body {
	overflow-x: hidden;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 2 weeks later...

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources