price option
-
Hi, the price option box for desktop looks good but for mobile, we can’t see it (I’m talking about the borders of the box)
and the same thing for agree to terms of condition box at the checkout page.
what the CSS to make them more clear for mobile?
ThanksThe page I need help with: [log in to see the link]
-
Use below CSS for this:
@media only screen and (max-width: 480px) {
.content-area .edd_price_options ul {
border: 1px solid #f2f2f2;
border-radius: 4px;
text-align: center;
}.content-area .edd_download_purchase_form .edd_price_options li {
padding: 8px 15px;
margin-bottom: 0;
border-bottom: 1px solid #f2f2f2;
}
.content-area .edd_download_purchase_form .edd-submit {
width: 100%;
}}
Thanks for your replay. I insert the CSS, clear cache, and test on mobile. There is no change in borders. For example, you can go to this link on mobile and see the borders, they are still the same.
https://teesvg.com/downloads/the-dadalorian-defination-svg-like-a-dad-just-way-cooler-shirt/Hi @emyabdel
Thanks for your patience.
Can you please provide me the rough screenshot which thing you are referring? so I can help you my best.
Hi @emyabdel
Thanks for the screenshot. I have take a look into it and it is looking as it should. It display according to your browser. It has default browser styling. EDD does not apply any additional CSS on it.
I have taken a look into chrome as well as in safari browser of Iphone and it looks as the browser display.
In case if we apply the CSS then we need to make sure that it will work with all web browser because each browser have its own rule to display them.
Have you checked other website or web page which have the radio or checkbox button so you will get more idea how it display.
1/ Thanks for your replay. I took the last pictures with PC just forget them. I take this one with mobile please see the link.
Look at commercial use checkbox. On mobile, we can’t see it.
I tested on 3 different browsers chrome, firefox, android internet browser, and always it looks the same.2/ Please I have another question which is more important:
Look at the home page:
https://teesvg.com/
for each post, I want to show just the first 3 lines of the title so they will have all the same height. Now all the tittle appears that’s why posts don’t have the same height.
Please take a look to this picture to understand more what I mean.Hi @emyabdel
Thanks for your response.
For your query,
1) For each post, I want to show just the first 3 lines of the title
Ans – There are two ways to do it. One is via CSS and other is custom code.
Below is the CSS to make the text in three lines then it display three dots (…) as a continuity.
Please add below CSS to WordPress > Appearance > Customize > CSS and save it. You can add this in your child theme style.css file also.
.home .edd_download .edd_download_title{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }Note : This is a modern browser CSS and it will works most of the modern browser. Please take a look.
2) For radio button, Can you please tell me in which mobile device you are checking this?
The CSS works thanks so much.
For radio button, I’m using Samsung galaxy note 4Hi @emyabdel
Thanks for your response.
Can you please check the same page in some other device / mobile also?
I checked on iPhone and it looks good, maybe it looks like that just with my phone. Thanks so much for your help I really appreciate
The topic ‘price option’ is closed to new replies.