Full background color issue and alignment issue

This topic contains 13 replies, has 2 voices, and was last updated by  Sebastian 5 days, 10 hours ago.

Author Posts

Martin_1

Hi,

I a realy sruggling with three things.

Issue 1:

I am tryng to get a full width background color behind the “Related Products” section on the product pages of this site (just above the footer):

https://www.wintherbikes.com/product-items/kangaroo-luxe/

I have tried this:

@media only screen and (min-width: 900px) {
.single-avada_portfolio #main > .fusion-row {
max-width: 100% !important;
}
.fusion-flexslider, .project-content {
background: #F5F5F5 !important;
max-width: 1140px !important;
margin: 0 auto !important;
}
.related-posts.single-related-posts {
background: #F5F5F5 !important;
margin: 0 -50px !important;
padding: 10px 400px !important;
}
}

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;
}

/** Content >> Table left padding product detail **/
.fusion-builder-column-5 td {
width: 1%;
padding-left: 48px;
}

/** Content >> Table right padding product detail **/
.fusion-builder-column-6 td {
width: 1%;
padding-left: 0;
}

/* remove the border around the table product detail page*/
.table-1 table {
border: 0px;
}

tbody tr td:nth-of-type(1) {
font-weight: bold;
}

/** Content >> Table background color product detail **/
.table-1 td {
color: rgb(255, 255, 255);
background-color: rgb(130, 185, 195);
border-width: 0px;
}

Issue 3:

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.

I currently have this CSS:

/*( Tablet & Phone )*/
@media (max-width: 767px) {
/** Footer >> Widgets footer location centre tablet only **/
.fusion-footer-widget-area {
text-align: center !important;
padding-right: 0 !important;
padding-left: 0 !important;
}

I tried setting the margin to auto but that had no effect.

Can anyone help me with these three issues? I have been struggling for about a week now :-(.


Sebastian

Hi Martin, unfortunately I’m away today and over the weekend. But I can help on Monday if the issues are still outstanding.

One thing I can say from a quick skim is that with issue 2 you could vertical-align: top; the table cells.

Cheers,
Sebastian


Martin_1

Hi Sebastian,

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.

Greetings,

Martin


Sebastian

Hey Martin,

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.

Cheers,
Sebastian


Martin_1

Hi Sebastian,

I hope you had a great weekend!

Issue 1:
Seeing as I am dealing with a pre-made theme here, I am limited to what I can do. So I am stuck on what is doable with css :-(.

Issue 2:
I have now added the class .test to the single table at the bottom on https://www.wintherbikes.com/da/produkt/kangaroo-luxe-4/
and created this:

.test {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
}

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.


Martin_1

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?

https://www.wintherbikes.com/da/produkt/kangaroo-luxe-4/


Sebastian

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.

Cheers,
Sebastian


Martin_1

Hey Sebastian,

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.

This is the css

@media only screen and (min-width: 900px) {
.single-avada_portfolio #main > .fusion-row {
max-width: 100% !important;
}
.fusion-flexslider, .project-content {
background: #F5F5F5 !important;
max-width: 1140px !important;
margin: 0 auto !important;
}
.related-posts.single-related-posts {
background: #F5F5F5 !important;
margin: 0 -50px !important;
padding: 10px 400px !important;
}
}

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 :-).


Sebastian

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.

Cheers,
Sebastian


Martin_1

Hi Sebastian,

I am very limited into what I can do with the related projects/posts

scr-014

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 :-(.

I tried it now with this:

.single-related-posts {
clear: both;
background-color: #f5f5f5;
width: 100vw;
position: relative;
margin-left: -50vw;
padding-top: 30px;
left: 50%;
}

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.


Martin_1

Oops, it looks like I had it commented it out LOL. No wonder it wouldn’t show.

Now it’s visible again. But now the question is: how do I get it to align where it should align?

https://www.wintherbikes.com/product-items/kangaroo-luxe/


Sebastian

Ah, thanks for sorting that. To align the child elements, you could try the following CSS:

.single-related-posts  > div {
max-width: 1100px;
margin:0 auto;
}

Cheers,
Sebastian


Martin_1

YES,

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!

You rock mate \m/


Sebastian

Great, I’m glad we got there too!

Well done for persisting, that’s the way to learn 🙂

You must login or register to reply to this topic.