I have a WooCommerce shop setup with the theme Retailer. The theme is currently setup to have 3 footer widget placeholders by using grids to allow 3 widgets to be placed. What I essentially want is to be just one widget with 1 grid that takes the width of the whole page/main container.
I have tried this and had success:
Footer Widget CSS
.container_12 .grid_4 { //Expands widget to width of container
width: 100%;
}
However when I did this, my shop sidebar menu to the left disappears. When I remove that CSS, footer goes back to the way is now and sidebar appears.
Refer to this page to see what I mean: http://museiam.ca/product-category/men/
Currently I took out the CSS code for the widget which is why the shop menu is displaying. But notice how the footer menu is messed up. Essentially, I want it to be centered all in one line in the center like so:
http://tinypic.com/r/jrv9mq/8
Here is the CSS for the grid that hold the sidebar:
Shop Sidebar CSS
.container_12 .pull_9 {
left: -820px !important;
}
Any input is greatly appreciated. Thank you.
Adding these 3 lines of CSS inside your stylesheet will fix everything and make the footer content appear centered in the middle without affecting the sidebar:
.gbtr_dark_footer_wrapper .container_12 .grid_3 {
width: 100%;
}
What the above code does is that it specifically targets the .grid_3 inside the footer and increases its width from 220px to 100% thus centering the contents of the footer.
Here's a visual of how it looks after adding the above code:
Related
I am now using the Envo Magazine Theme for Wordpress. I switched themes recently. I have a wider post area to work with. However, that means for older posts with smaller images, the images are floating on the left and text is wrapping around the images.
I don't want any text wrapping around images.
How do I force all post images to be center-aligned and not floating?
I tried forcing the post area to be a smaller width and that takes care of the overflow text, but that defeats the purpose of switching to a wider theme. I can't seem to find the right code to select all post-attached images. Please advise. Thank you!
Here is one example of a code I tried. I wanted to force all post images to be center-aligned with no text overwrap.
.single-entry-summary img {display: block; margin: 0 auto;}
It looks like you can't simply select all images on the page, because they are not build with the same structure. You can prevent the text from wrapping around the first image by removing the class pibfi_float_left from the span that is surrounding it. Or you can edit the class and remove the float: left.
For the other pictures, you need to remove the class alignleft from the surrounding div. Or you can edit the class and remove the float: left.
To center the images, you also need to add display: block to the surrounding span:
.single-entry-summary span {
display: block;
}
.single-entry-summary img {
display: block;
margin: 0 auto;
}
Important note: For all images except the first one, you need to adjust the width of the attachment divs (which have an id starting with attachment), otherwise they won't be centered. You can do it like that:
.single-entry-summary div[id^='attachment'] {
width: 1000px !important;
}
I'm trying to create a fixed navigation bar on the left of a site using Bootstrap. This is the site: link
The scrollspy seems to work but the nav div seems to be underneath the Bootstrap containers (visible when scrolling the page, the white line separating the sections seems to be on top of the navigation bar). Also the navigation items aren't clickable.
How can I fix my navigation bar? Is it's placement outside the Bootstrap grid the problem (sadly I don't know a different solution as I use containers and rows for the separated sections of the site)?
Thanks in advance for the help and I hope the CSS isn't too bad O:-)
Add this style to scrollspy menu:
.scrollspy {
width: 50px;
position: relative;
z-index: 999;
}
I recently bought a parallax template, and I am trying to make a website by modifying the code to my needs. The template I use have a full screen slider at the top of the one page parallax theme, marked as id="home". For some reason, this section is set to 100% height, but I want to change this.
In the template, the original code is as follows:
#home.home-fullscreenslider {
background: url(../images/pattern.png);
position: relative;
overflow: hidden;
height: 100%;
}
And this initiates the slider:
<div id="home" class="home-fullscreenslider">
</div>
I deleted the height of the slider, so now I can fit the images to the screen properly. But the whole section is still at 100% height. I couldn't find any portion of the css code that dictates the height of #home. What do I need to do?
I have a problem with Bootstrap 3. The setup is a simple 2-column page (sidebar and main content). Because I have dropdown menus which can overlay out of the main container, I cannot use the visibility:hidden or auto trick.
I use another technique which is applying a padding-left to the main container to ignore the floated element.
.sidebar {
float: left;
width: 200px;
}
.main {
padding-left: 210px;
}
Unfortunately, bootstrap navs use a clearfix internally which causes the navbar inside main to become as big as the sidebar.
http://jsfiddle.net/9ejqa/1/
Is there a way to make the clear only clear elements inside main and not including the sidebar?
instead of manually trying to make the columns yourself you can use the built-in bootstrap classes that do everything for you and are responsive.
First wrap everything with a div that has class="container"and in that you have a div with class="row" then add to the sidebar and to the main div the appropriate col class'
Use the bootstrap Grid page as a reference to see all the examples they have.
I have updated your FIDDLE with the basic markup to do what you need, hope that is what you are looking for.
I have a GWT app that have a HorizontalPanel that span across the width of the page, that serves as the "top bar" of the app. However I want to make it "sticky" that is when the page content grows, and when scrollbar appears, when scrolled I want the said HorizontalPanel to stick on top. Is it possible to do with GWT and/or with the help of GQuery?
By using CSS:
Add/set a css class to your HorizontalPanel
myHorizontalPanel.setStyleName("onTop");
In you css file:
.onTop{
position: fixed;
top: 0px;
left: 0px;
/* adapt width and heigth to fit your needs */
width:100%;
height:40px;
}
That should do the trick
You can use DockLayoutPanel to divide page. Put your bar on g:north and an scroll panel on g:center. That way if content inside the scroll panel overflow, the scrollbars will appear only on the "content" part.
<g:DocLayoutPanel unit="PX">
<g:north size="40"> <!-- you must provide a fixed size, you can change it later -->
your bar content
</g:north>
<g:center>
<g:ScrollPanel> <!-- it will be stretched to ocuppy all available space -->
here goes your content
</g:ScrollPanel>
</g:center>
</g:DocLayoutPanel>