I would like to change the way my website is displayed on mobile, in particular the homepage. At the moment the images are stacked on top of each other which looks strange. I disabled the stack images within visual composer which made it a bit better. However the sides of a few images went off the page.
How can I play around with the format? I don't seem have the mobile responsiveness tab under columns?
Please send us screenshot of the problem and we will be able to understand better your questions and try to help you if that problem is related to the theme.
I took out the form CSS code which fixed the checkout issue I asked about on another ticket. It unfortunately killed the form! I had left out a } symbol which brought back the colour. As you can see now the submit bit is really wide. So obviously that form code controlled both the checkout & the submit button.
Is there a way to isolate CSS to just one element on the page?
I have put disable stacking on now. I realised I hadn't had it ticked. On mobile it is now showing what I am going for. Unfortunately the pictures are going over the edges, which looks to be due to the gaps between the masonry.
Can you please try to be very specific about the question and explain it more to us, in this way we can easily understand you and give you the proper answer.
I submitted a ticket (#942422 ) regarding a checkout issue I was experiencing. The checkout forms were squashed together making them impossible to use. One of your team members told me that some CSS code was responsible for the problem. I deleted the code, which fixed the checkout issue, but unfortunately the submit button on the homepage became really wide. So the CSS code that was affecting the checkout was also formatting the newsletter submit form. The code I removed was:
form {
width: 450px;
margin: 17% auto;
}
My question is, is there anyway to make the code above affect only one element, in this case the newsletter submit form? I don't want it to effect all forms on the website, which it appeared to be doing before.
My other problem is regarding the formatting of the masonry images on the mobile site. As you can see the images go right up to the border & a small bit is lost. Is there a way to reduce the gaps between the images so that they are completely displayed on mobile?
2— That is coming from Visual Composer somewhere (http://drops.laborator.co/dhDi), if you didn't know where that -20px came from, then please add the code below to Custom CSS (on your homepage only):
The mobile responsiveness side has been fixed thanks.
The code for the checkout form made the checkout form squashed again. Is there a way to just isolate the newsletter form on the homepage with that code?
I would like to change the way my website is displayed on mobile, in particular the homepage. At the moment the images are stacked on top of each other which looks strange. I disabled the stack images within visual composer which made it a bit better. However the sides of a few images went off the page.
How can I play around with the format? I don't seem have the mobile responsiveness tab under columns?
Hi Luke,
Please send us screenshot of the problem and we will be able to understand better your questions and try to help you if that problem is related to the theme.
I have attached a screenshot with some notes. Thanks
Hi Luke,
- I'm sorry but that is not possible.
- The submit button is not on the right place on desktop too
(view large version)
so maybe you have set that button on the right place.
Hi Yill,
I took out the form CSS code which fixed the checkout issue I asked about on another ticket. It unfortunately killed the form! I had left out a } symbol which brought back the colour. As you can see now the submit bit is really wide. So obviously that form code controlled both the checkout & the submit button.
Is there a way to isolate CSS to just one element on the page?
I have put disable stacking on now. I realised I hadn't had it ticked. On mobile it is now showing what I am going for. Unfortunately the pictures are going over the edges, which looks to be due to the gaps between the masonry.
Regards,
Luke.
Hi Luke,
Can you please try to be very specific about the question and explain it more to us, in this way we can easily understand you and give you the proper answer.
Hi Yill,
I submitted a ticket (#942422 ) regarding a checkout issue I was experiencing. The checkout forms were squashed together making them impossible to use. One of your team members told me that some CSS code was responsible for the problem. I deleted the code, which fixed the checkout issue, but unfortunately the submit button on the homepage became really wide. So the CSS code that was affecting the checkout was also formatting the newsletter submit form. The code I removed was:
form { width: 450px; margin: 17% auto; }My question is, is there anyway to make the code above affect only one element, in this case the newsletter submit form? I don't want it to effect all forms on the website, which it appeared to be doing before.
--------------------------------------------------------
My other problem is regarding the formatting of the masonry images on the mobile site. As you can see the images go right up to the border & a small bit is lost. Is there a way to reduce the gaps between the images so that they are completely displayed on mobile?
Thanks,
Luke.
Hi Luke,
1— For the checkout you can use this code:
body.woocommerce-checkout form { width: 450px; margin: 17% auto; }and for the homepage, you can go to Edit page then add your CSS on the Parameters and Options > Custom CSS
(view large version)
2— That is coming from Visual Composer somewhere (http://drops.laborator.co/dhDi), if you didn't know where that -20px came from, then please add the code below to Custom CSS (on your homepage only):
.vc_row.vc_column-gap-10 {
margin-left: 0px !important;
margin-right: 0px !important;
}
Hi Yill,
The mobile responsiveness side has been fixed thanks.
The code for the checkout form made the checkout form squashed again. Is there a way to just isolate the newsletter form on the homepage with that code?
Regards,
Luke.
Hi Luke,
Glad to hear that!
I just send you the example, to use that code for the homepage only just add on the Custom CSS on the homepage only:
form { width: 450px; margin: 17% auto; }Hi Yill,
Cheers, it's all working nicely.
Fantastic service & thanks for being patient with me while I learn this stuff!
Regards,
Luke.
Hi Luke,
I'm glad to hear that
Will set this ticket as solved from here.