-
Posts
-
Hi;
I want to create a blog like this: https://woocommerce.com/posts/optimizing-woocommerce-checkout/
And I try and get a successful result on the desktop: https://ezvisa.vn/kinh-nghiem-xin-visa-phap/. And my method is used only 1 column, and give it a margin to this column. Here is my CSS:
.cangiuacollumn {
margin-left: 15% !important;
margin-right: 15% !important;
width: 70% !important;
}
But on Mobile, I want this margin only 5%, and I try:
@media only screen and (max-width: 767px) {
.cangiuacollumn {
margin-left: 0!important;
margin-right: 0!important;
width: 95% !important;
}}
The result is not success.
“cangiuacollumn” is the CSS class of this column. What can I do to display this blog like the sample I provided above?Hey NHAT TAN,
I load the page and I can see you have managed to have the same design?
Not sure where the problem is maube add a screenshot so it is more clear?Best regards,
BasilisHere is my page: https://imgur.com/R0lkZdn
and here is Woo Post Page: https://imgur.com/FkFeGSt
You can see mine has a huge margin on left but no margin on right.
Can you fix it?Oh, I solve this.
Oh, I realize the block I put in a color section so that It has a huge margin already. So I put the CSS for display on mobile like this:
@media only screen and (max-width: 767px) {
.cangiuacollumn {
margin-left: 0!important;
margin-right: 0!important;
width: 100% !important;
}}
Everything perfect.
Thank you!
- You must be logged in to reply to this topic.