I am using opencart 2.0.1.1. I have removed wishlist and compare button from featured module. Now I am facing a problem that the cart button is at left position but I want it to place it center..
Please tell me how can I place it in center?
Go to your site source > catalog > view > theme > default > stylesheet > stylesheet.css > & then find below css & then Replace to width: 100%; instead of width: 60%; in below css.
.product-thumb .button-group button {
width: 60%;
border: none;
display: inline-block;
float: left;
background-color: #eee;
color: #888;
line-height: 38px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
Related
I'm having my html-css practice day. Right now, the NAV-Bar-Menus are appearing on the upper left of the screen (vertically). I have tried checking CSS cheat sheet regarding display, flex, etc., google, and all but its still not working. Any help for a newbie would be appreciated :)
Here's the CSS:
<style>
.nav-bar {
display: flex;
align-items: center;
width: 100%;
padding: 10px;
font-family: Arial;
background-color: orangered;
color: white;
font-size: 20px;
text-decoration: none;
list-style: none;
margin: 0;
}
</style>
and here's the HTML:
<nav>
Home
Wordpress+
Web Design+
Graphic Design
Inspiration
Contact
About
</nav>
I've been trying to solve this problem all day without success.
I want to change de background color from my home page. For this i have use this CSS:
.page-id-6128 {
background-color: #F5F5DC;
background-size: cover;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
min-height: 100vh;
background-position: 50% 100%;
}
The problem is that i can't remove the white background from the menu as you can see in the next image:
https://i.stack.imgur.com/C9c2P.png
www.albertosotophotography.com/home
Thank you for your help!
Add this:
.navbar {
background-color: #F5F5DC;
}
EDIT
Better solution - remove background-color property from your .site class. Now you have:
.site {
background-color: #fff;
margin: 0 auto;
width: 100%;
}
On (my site) I would like to place the menubar in the center of the page.
Here the code of my menubar:
#navigation {
padding-bottom: auto;
width: 960px;
margin: auto;
text-align: center;
text-transform: uppercase;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 13px;
background-color: #DDDDDD;
border: 0px solid;
border-radius: 15px;
color: #000000;
display: inline-block;
}
Thanks in advance for helping me! :)
Add width: 100%; to your #navigation for a full-wdith centered menu.
Or change the display to block for a centered menu without a full-width background.
If you want to keep the yellow line under, add a 1px bottom margin. This will shift the rest one pixel lower and it will reveal a yellow line.
margin-bottom: 1px
Working JSFiddle for this: http://jsfiddle.net/qwnwkp7u/2/
Switch display: inline-block; to display: block;
I guess you need to understand something about block and inline-block elements.
Block elements , if sized and smaller than page/container can basicly; be centered with margin:auto;.
Inline-block element behaves like text and can follow text-align value.
To center your menu , you have then 2 options:
margin:auto; with a block formating, you need then just to remove your inline-block display wich does:
#navigation {
padding-bottom: auto;
width: 960px;
margin: auto;
text-align: center;
text-transform: uppercase;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 13px;
background-color: #DDDDDD;
border: 0px solid;
border-radius: 15px;
color: #000000;
}
or
text-align:center; from its parent if as an inline boxe. Wich would be here :
.bg-wrapper {
text-align:center;
}
If inline-block was here used to trigger some special layout , like to hold floatting elements, you could here turn display:block into display:table;.
doei
What code do I add/ replace/ remove to change the size ofmarketbot.net
Are you talking about the global navigation menu or the slider that is on the page? The slider looks like it has a margin problem (in both I.E. 8 and Google Chrome).
I adjusted the css class named content-top to the following, so it isn't overflowing into the header:
.content-top
{
position:relative;
margin-top: 80px;
margin-bottom: 5px;
}
After I made the adjustments, it looks somewhat cleaner in the slider and header divs.
#header {
background: #FFFFFF
width: 100%;
padding: 30px 0px;
position:relative;
margin-top: 80px;
margin-bottom: 5px;
}
i didn't completely understand your question but i have tried to answer it.
you would need to edit
#header {
background: #FFFFFF
width: 100%;
padding: 20px 0px;
}
Using the emenu Yii extension for a menu. The underlying project for this extension is http://lwis.net/free-css-drop-down-menu/ .
Right now the sub menus display in a row (which does eventually wrap to a 2nd row). I'm using the "nvidia" theme.
How do I make submenus vertical? I want the items in the sub menu to stack vertically on top of one another.
This is a css issue. The inner <ul> should have the style: width : 100% which comes from dropdown.css, but it is being overridden by themes/nvidia.com/default.css where it is specified as: width: 170px. So you can change that value back to 100% by adding it in your own custom css file.
dropdown.css:
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
themes/nvidia.com/default.css:
ul.dropdown ul {
width: 170px;
background-color: #333;
color: #fff;
font-size: 11px;
text-transform: none;
filter: alpha(opacity=90);
-moz-opacity: .9;
KhtmlOpacity: .9;
opacity: .9;
}
mystyle.css:
ul.dropdown ul{
width:100% !important;
}