2

I am not good at CSS. Here I want to divid every grid evenly. The is my page. My view I use grid instead of table or unformatted list, which are only text on each row not suit my want.

https://www.jeffhost.idv.tw/services

The other question is on this. I found the picture too small, while making the window smaller. How to adjust a proper setting on View?

https://www.jeffhost.idv.tw/online-buying

Thanks.

  • Hi jeff, I just updated my answer. Let me know if it helps! – Kellen Feb 8 '17 at 2:01
1

Okay, the answers to your questions are both rather simple.

  1. Your columns are uneven because you did not apply a width to the columns. To solve this I simply applied a percentage width to the td element as follows:

.view-view-services .view-content td{ width: 33.33%; }

  1. When you make your browser's viewport smaller, your images become smaller. This is due to the auto properties applied to the img tag's height and width. To solve the issue I overrode the max-width property as follows:

.view-uc-products .views-field-uc-product-img img{ max-width: none; {

Let me know if you have any questions!

| improve this answer | |
  • 1
    Thanks. I get known more about CSS via some books and then I try this modification. – jefferyear Feb 12 '17 at 14:16
  • Hi, I wonder a style to be on the phone. May I adjust each column width individually? I want to distribute the first column width 25%-33. The second width, title is at least 25-33.33%. Both of the two occupy 50%. The third one, price occupy 20% and the rest of place for adding to the cart. Is there any way to be more customized to adjust the size? Otherwise, I want the picture is set on its block aligning to the center. Wish your advices. Thanks. – jefferyear Feb 15 '17 at 5:55
  • @jefferyear I'll get back to you on this. You can specify the width of each individual column using child selectors. If you want to design your columns responsively (for a phone or tablet), you'll have to learn how to use media queries. Using media queries, you'll be able to adjust the column width based of the size of the screen. For example, you might have 3 columns at 33.33% on desktop, 2 columns at 50% on tablet, and 1 column at 100% on mobile. – Kellen Feb 15 '17 at 17:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.