Hello,
I’d like to make a few adjustments to my website, http://www.viraltacos.com
1. For the load more buttons, I need to make the arrow a little bigger and center aligned with “More Stories”. Here is my current CSS:
.td_ajax_load_more {
font-size:15px;
padding: 13px 18px;
}
2. For the category pages, I’m trying to place a full-width banner on the top of the page. However there is padding on both sides and I can’t get it to stretch all the way no matter what I do. Check here: http://viraltacos.com/animals/
3. Disable the search feature, or at the very least remove it from the header (both desktop and mobile). For the desktop header, I need to move the categories to the right to take the place of the search icon; the logo will remain on the left side.
4. Disable the “Related Articles” section on the mobile site. Also if possible, I’d like to have this section full-width (all 3 columns) on the desktop site below the post content and sidebar. Is there an easy solution to this?
Thank you in advance!
Mike
Hello Vegan Flavour,
1)If you want to change the size for your “More Stories” button, you should use a bit of CSS code to do that and place it in Theme panel->Custom CSS area.
.td_ajax_load_more i {
font-size: 20px;
}
The result you should see here -> http://screencast.com/t/TLGCQ0eejeL
2)Try the code below ->
.td-main-content-wrap{
padding-top:0!important;
}
.wpb_content_element{
margin-bottom: 5px;
}
3)Use the code below ->
.td-icon-search{
display:none!important;
}
4) The code will hide the Related Articles on mobile.
@media (max-width:767px){
.td_block_related_posts{
display:none;
}
}
If you want to display more levels in our theme and if you are not aware of the steps which are needed to take in this regard, please consider hiring a freelancer/developer to help you because we cannot provide custom work at the moment, sorry!
Hope this helps!
Thanks for the message!
Thank you very much Catalin! The solutions to #1 and #4 work flawlessly.
For #2: I am referring to the padding on the left and right side, not the top and bottom. No matter what options I use in Visual Composer it won’t stretch all the way.
For #3: The search icon is now hidden from my header. However I need to move the categories to the right to align with the rest of the content, instead of an empty space where the search icon was.
Hello Vegan Flavour,
For #2, I have noticed that you are using the module 3 style to display the posts to your category page. So, please notice that this is the style for this module and we do not recommend to change it via CSS because you should break the layout of theme. If you are not happy with this, you can change it with another one, from our list, here -> http://screencast.com/t/ATVc3X8rnOf If you want to stretch the image with CSS you should do it yourself because this task involve additional customizations until to good results received and we cannot provide custom work at the moment, sorry!
For #3, try the code below ->
.td-header-style-6 .td-header-main-menu{
padding-right:0!important;
}
Thanks for the message!
Hi Catalin,
Thank you for the update! The solution for #3 works well.
For #2 though, I am not using the category page templates. I created a blank new page and inserted a text block (for the category name) and block #5 for the posts. Whether I add the banner to these pages or a post, it doesn’t full stretch.
Hello Vegan Flavour,
Unfortunately, I do not exactly understand what you mean regarding on full stretch. Please provide some useful screenshots with the problem so I can inspect it closer. Also, you can provide the specific link.
Thanks for the message!
Hi Catalin,
Sorry for the confusion.
http://viraltacos.com/animals/
http://www.screencast.com/t/5Yafg9ko
I added a banner to the page above and selected “stretch row and content (no paddings)” in visual composer. What I’m wanting to do is remove the gaps on the left and right side to look like this page:
http://www.upworthy.com/breakthroughs
Thanks again!
Hi,
Please add an extraclass to your column where you use the Single Image element – http://screencast.com/t/uDvtI9H7dHm and use this custom css to remove the left/right padding:
.extraclass{
padding-right: 0 !important;
padding-left: 0 !important;
}
Thanks!
