which does create a grey background color behind the related products but messes up the images that show there at smaller screens (moves them and even overlaps them) and at even smaller than those screens removes the grey background all together.
Issue 2:
I created a responsive table with “Technical Data” on a green/blue background on the product pages but on lower screensize the second row of the right table doesn’t align neatly with the first.
Here is the css I used:
/* Making tables responsive and the text in the first row bold. */
@media screen and (max-width: 600px) {
table {width:100%;}
tbody td:before {
content: attr(data-th);
display: block;
text-align:center;
}
}
.table-1 td, .table-1 th {
white-space: normal !important;
}
The four columns in the footer won’t align neatly in the center on smaller screensizes at least when I test it on my phone (Huawei Mate 20) horizontal en vertical viewport.
Monday is fine. I have been struggling with it for a week, a few more days won’t kill me :-). Who knows, maybe I’ll finally be able t solve it in the mean time :-D.
I tried your solution, but it didn’t seem to solve it. Maybe I’m misunderstanding you? I targeted the cells and all it did was align to the top the content of all cells. This didn’t do anything for the misalignement between the second table rows of both tables on smaller screens.
Issue 1:
Can you move the related products outside of the fusion-row element that sets a narrow max-width? Shifting the HTML around would probably be simpler than overriding the row max-width in this case.
Issue 2:
You can’t align table cells in different tables. They must be part of the same table. So you will need to combine the data into one table. And then make the 1st and 3rd table cells bold using
.fusion-table td:nth-child(2n+1)
Issue3:
I see you have padding-left:200px on the footer-widget area. Using a fixed spacing value like this will not look good on a range of screen sizes. If is better to use percentage values, or override the left padding on smaller screens.
However, that kills my responsiveness and only seems to work in Chrome. THe original tables above that single table are responsive.
Issue 3:
I removed all media queries and that solved it. I totally forgot I had added css to the widgets a while ago and as soon as I removed it (except for centering the content) it all stacked nicely. So thumbs up to you for pointing it out to me :-D.
In regards to issue 2 I have now duplicated to this page the same table. As you can see, due to me messing around with the css both tables (although they contain exact the same information) are different. The one on the right is less tall. So maybe that’s where the issue with the alignment comes from?
With issue 1, could you put the CSS back even though it messed up the images? If CSS is your only option, you will need to make the row full width and then deal with how this affects the images.
Wish issue 2, why can’t you create a table with 4 columns? The variable length of the text will always cause data in separate tables to misalign.
Issue 1:
I added the css back. As you can see https://www.wintherbikes.com/product-items/kangaroo-luxe/ , the background of the related products is grey. But the moment you start messing with the screensize, it all goes horribly wrong. I tried so many things :-o.
Issue 2:
I went with 2 columns for the relative ease of making them responsive and making the content of the first row bold. I never even thought of using 4 columns to be honest.
I am not sure how to make that responsive as well. I will look into it *thumbs up* but I might be back for that one though :-).
Issue 1:
I see the images are controlled by an image carousel. This sets various inline styles dynamically (e.g. max-width and width). It will be tricky to override this via Microthemer because the carousel script can dynamically apply new styles after the page has loaded. Perhaps you can address the display problems by playing around with the settings in the carousel?
Issue 2:
Great that you’re making some progress on this. Using flexbox would be another option. You may find it easier to make responsive.
I am very limited into what I can do with the related projects/posts
I am not sure if any of these settings are of any help. I never believed this would this difficult to achieve. It looks relatively easy. Adding a background color to something like this :-(.
but that doesn’t align the related items correctly. (they are supposed to start where the blue/green techinical data block starts). It aligns it all the way to the left (even overflowing a bit as you can see from the text “Related Porducts” where the R falls away a bit).
It also works good on smaller screens. So that is a plus.
This is as close as we can get it :-). For now I am happy with the result. Who knew that it would be THAT difficult :-). But I am not one to give up easily and I am glad you stuck with me Sebastian!
.
.