Block position & text block margin on tablet

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
 

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

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 !

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

Do you still need help on this?

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 ?! 

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

@tuanphan Hey !

Just back from another work trip. It works ! Looking forward to finishing my new website very soon.

You are a legend, thanks a lot !!!!