Full width image block on mobile

This topic has 6 replies, 2 voices, and was last updated 2 years, 7 months ago by tikaram.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
April 10, 2021 at 9:39 pm #279288

Bastien Chilloux
Participant

Hi

Can you give me the CSS code to have 0 margin left and right (true full-width) on blocks when displayed on mobile devices <769px ?

Thank you !

https://bastienchilloux.com

April 11, 2021 at 3:16 am #279306
tikaram
Keymaster
@bastienchill : Can you please try adding the following additional css.
```
@media screen and (max-width: 769px) {
	.site-content > .wrapper {
		padding: 0 !important;
	}
	.wp-block-column {
		margin:0 !important;
	}
	.wp-block-column:not(:only-child) {
		flex-grow: 1 !important; 
	}
}
```
Regards,
Tikaram
April 11, 2021 at 3:21 am #279309

Bastien Chilloux
Participant

Hi,

Thank you it works great but it is not only affecting the image (see the contact form on contact page is weird looking now).
Maybe you could give me a CSS tweak of this code affecting all the pages excluding homepage and contact page ?

Thank you !

April 11, 2021 at 11:28 am #279310

Bastien Chilloux
Participant

Adding body:not(.home) adds margin to my homepage ‘true’ full-width columns.
I’d like those exclusions on homepage to affect only the player on the top.
Can you please help me on this ?

April 19, 2021 at 12:02 pm #280137

Bastien Chilloux
Participant

What is the new CSS code which doesn’t affect my contact page (page-id-334) ?
Can you give me a custom one please ?

April 19, 2021 at 12:13 pm #280138

Bastien Chilloux
Participant

Found it myself,
Thanks

April 28, 2021 at 5:47 am #280757

tikaram
Keymaster

@bastienchill : Glad to know that you have found the solution by yourself. Let me know if you have any more issues.

Regards,
Tikaram
Author

Posts