Home › Forums › Weaver Xtreme Theme › X-Plus Flex Columns Widget
- This topic has 42 replies, 3 voices, and was last updated 2 weeks, 4 days ago by
scrambler.
-
AuthorPosts
-
June 7, 2022 at 17:45 UTC - Views: 71 #70873
GR8FL
ParticipantJust posted reply that doesn’t exist here. Trying again.
I want to use the 3 column widget on the same page but each set having different background colors.
Here is the Xtreme Plus Option for what works fine
.widget.content-3-col {width:31%;margin:1% !important; background:#F8F8FF;border: 2px solid #13577f; border-radius:5px; padding:2%; position: relative; padding-bottom:60px;}
Here is the Xtreme Plus Option with different background color
.mywidget.content-3-col {width:31%;margin:1% !important; background:#D3E4ED; border: 2px solid #13577f; border-radius:10px; position: relative; padding-top:2%;padding-left: 1%; padding-right:1%; padding-bottom:60px;}
Here is the html
<div id="mycont" class="widget-eq"> <div class="mywidget content-3-col"> Row 1 - First column content First column content First column content First column content First column content First column content First column content </div> <div class="mywidget content-3-col"> Row 1 - Second column content Second column content Second column content Second column content</div> <div class="mywidget content-3-col"> Row 1 - Third column content Third column content Third column content Third column content Third column content Third column content Third column content Third column content Third column content Third column content</div> </div> <div style="clear:both;"></div>
The boxes are different heights depending upon how much content is there.
What am I doing wrong?
June 8, 2022 at 00:26 UTC - Views: 63 #70874scrambler
ModeratorThe widget must include the widget class
<div id="mycont" class="widget-eq"> <div class="widget mywidget content-3-col"> Row 1 - First column content First column content First column content First column content First column content First column content First column content </div> <div class="widget mywidget content-3-col"> Row 1 - Second column content Second column content Second column content Second column content</div> <div class="widget mywidget content-3-col"> Row 1 - Third column content Third column content Third column content Third column content Third column content Third column content Third column content Third column content Third column content Third column content</div> </div> <div style="clear:both;"></div>
June 8, 2022 at 10:58 UTC - Views: 54 #70875GR8FL
ParticipantThank you.
January 2, 2023 at 14:05 UTC - Views: 37 #71516This reply has been marked as private.January 2, 2023 at 17:19 UTC - Views: 33 #71517scrambler
ModeratorYou forgot to add float-left to your main styling rule below
.page-id-8235 .widget.content-4-col {width:23%;margin:1% !important;background:#F5FFFA;border: 2px solid #165873;border-radius:5px;padding:1%;position: relative;padding-bottom:60px;float:left;}
In doubts, always refer to the guide article
Responsive Columns and Widgets – Weaver Xtreme Guide (weavertheme.com)
But you have One other error that may cause problems.
IDs must be unique in a page.
All your widget containers are using the same id mycont
You need to change that to mycont1, mycont2, mycont3…. so they all have a different id
January 2, 2023 at 17:33 UTC - Views: 27 #71518scrambler
ModeratorIn case you saw my initial post before I edited it, above is the Actual problem (missing float-left property)
January 2, 2023 at 22:13 UTC - Views: 22 #71519GR8FL
ParticipantThat worked to add it, but it’s weird since I didn’t have
float:left;
on the other site. The following was placed in the Xtreme Plus tab on the page it’s called from,.widget.content-4-col {width:23%;margin:1% !important; background:#F5FFFA; border: 2px solid #165873; border-radius:5px; padding:1%; position: relative; padding-bottom:60px;}
.widget.content-3-col {width:31%;margin:1% !important; background:#F8F8FF;border: 2px solid #13577f; border-radius:5px; padding:2%; position: relative; padding-bottom:60px;}
.mywidget.content-3-col {width:31%;margin:1% !important; background:#D3E4ED; border: 2px solid #13577f; border-radius:10px; position: relative; padding-top:2%;padding-left: 1%; padding-right:1%; padding-bottom:60px;}
January 2, 2023 at 22:28 UTC - Views: 20 #71520scrambler
ModeratorFloat:left should always be there for the columns CSS, it may work without depending on the context, but should be there for 100% sucess
January 3, 2023 at 14:29 UTC - Views: 16 #71521GR8FL
ParticipantI will add it to all of them.
Thanks @scrambler.
January 9, 2023 at 23:19 UTC - Views: 10 #71545GR8FL
ParticipantAnd again am running into issues where I had to clone a staging site to meet the particular naming conventions for Gravity Forms.
The old staging site is https://hattie-test.littledropup.com/ and the GF acceptable one is https://test.hattie.littledropup.com. Subtle difference, but they will allow the URL to accept the production site license.
Problem is the widgets don’t appear the same as you can see the Learn More button is not at the same level whether there is less or more rows of text.
I’d like to get rid of the former staging site, but need the new one to look correctly.
January 10, 2023 at 04:39 UTC - Views: 5 #71549scrambler
ModeratorCompare the CSS, the site with the aligned button as an extra rule to do that
.mybutton {position:absolute;left:0;bottom:10px;width:100%;}
You may want to add comment to your custom CSS so you can remember what it is for like, using /* comments */
/* css to align buttons */
.mybutton {position:absolute;left:0;bottom:10px;width:100%;} -
AuthorPosts
- You must be logged in to reply to this topic.