Working on a wordpress site. Having trouble aligning a product category block. First it would only display 4 products when per. row if i set to 5, 3 if set to 4, etc. I fixed that, something to do with margins. The category block is slightly off center, really annoying. Below is some code for the block that i used. Any help would be appreciated.
https://rightwaycrane.staging.wpengine.com/pendant-control-stations/
.page-id-1608 .wc-block-grid__product {
margin: 0;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 15px;
padding: 15px;
}
It looks like the following styles are causing your content to not be centered correctly.
.content-part-left {
padding: 50px 30px 20px 98px;
}
.content-part-left ul {
padding-left: 40px;
}
.content-part-left ul {
padding-left: 20px;
}
If you remove or adjust it should resolve the center on page issue.
.content-part-left {
padding: 50px 30px 20px;
}
.content-part-left ul {
padding: 0;
}
Related
I personalize a part of my Prestashop site and i don't know what I can use for center this element :
Image
Css :
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
margin: 25px 25px 25px 25px;
display: none;
background-color: white;
overflow: hidden;
}
If you wanna center the words inside the container exist the property css text-align
You must have include the html too if you want a better answer and what have you tried.
As an example, these elements were centered using css, text-align:center;
I have come across a slight problem, I set my nav bar to 100% width, and now i have a gap on the right hand side of my page and a horizontal scroll bar for the page, I do not know why it has done this. Please see code attached.
he code is:
nav {
width: 100%;
height: 35px;
text-align: center;
background-color: #42C2DA;
padding: 6px;
margin-bottom: 50px;
}
nav ul {
padding: 7px;
margin: 1px;
width: 100%;
}
nav li {
display: inline;
padding: 5px;
margin: 5px;
}
nav li a {
color: white;
text-decoration: none;
padding: 4px;
}
nav li a:link a:visited {
font-weight: bold;
}
Could someone explain where i am going wrong... or what is happening here.
I dont have 10 rep so cant post a pic.
Your nav bar has padding:6px; this adds 6px to all sides of the div, meaning the actual width of that element isn't 100%, but rather 100% + 12px.
To fix this, try using box-sizing: border-box, which makes it so that your padding is calculated into your specified 100% width.
Horizontal scroll bar is probably because You've set:
width: 100%
padding: 6px
And for that reason You will have total width: 100% of viewport + 12px
Set box-sizing: border-box and this fix Your problem - more info about box-sizing.
We have strange issue in iPad (iOS7) - see picture below:
On desktop and other devices it looks fine:
The list has very simple code:
<ul>
<li>Transitioning Veterans</li>
<li>Student Veterans</li>
<li>Guard & Reserve</li>
</ul>
CSS:
ul {
margin: 55px 1% 0 3%;
width: 19%; //part of parent div
padding: 0;
float: left;
display:block;
}
li {
margin: 0;
padding: 0 0 6px 0;
position: relative;
list-style: none;
list-style-image: none;
}
a {
display: inline-block;
margin: 0;
padding: 0 15px 0 0;
}
There is nothing special about that code, beside that it is inside container for sub-navigation that slideDown() (jQuery) when parent item is clicked.
See if changing the height of the li makes any difference like this, also add a border to any CSS this will tell you which element is incorrect
li {
margin: 0;
padding: 0 0 6px 0;
position: relative;
list-style: none;
list-style-image: none; height:30px; border:1px solid black;
}
If it's not the height then try other values like top, bottom margins and padding
Good page to use for testing is here
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_iframe_height_width
The position:relative in li tags caused li elements overlapping each other on iPad.
Our application has a master .css common for all our pages and we are not allowed to change anything in this file.
We have an entry there as follows:
ul li{display:block;padding:0 0 0.5em 15px;margin:0 0 0 0;background:url(../images/bullet.gif) top left no-repeat;}
I am implementing predictive search on one of the jsp-s and I have a specific css file for this purpose which is as follows
.ac_results {
padding: 0px;
border: 1px solid black;
background-color: white;
overflow: hidden;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: none;
list-style: none;
padding: 0;
margin: 0;
list-style: disc inside;
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
/*
if width will be 100% horizontal scrollbar will apear
when scroll mode will be used
*/
/*width: 100%;*/
font: menu;
font-size: 12px;
/*
it is very important, if line-height not setted or setted
in relative units scroll will be broken in firefox
*/
line-height: 16px;
overflow: hidden;
}
.ac_loading {
background: white url('indicator.gif') right center no-repeat;
}
.ac_odd {
background-color: #eee;
}
.ac_over {
background-color: #0A246A;
color: white;
}
My problem is that I am unable to remove this bullet.gif from my current predictive search list . If I add background: none I am loosing all the existing background colours.
How can I stop this bullet.gif to appear in my list.
PLEASE NOTE : I tried with background-image:none; also and it did not work, the bullet.gif is still coming up in my search list :(
Regards, M
Instead of background: none try:
background-image: none
You should write
background-image:none;
When viewing my site in IE, the site description looks as if the bottom of the letters are cut off. Of course, everything is fine and looks nice in Safari/Firefox/Chrome, but IE is killing me. It has been made on the WordPress Twenty Ten theme.
I adjusted the margins and padding with no luck. It seems that reducing the font size helps, but it can't be much smaller or it will be unreadable.
Any help would be much appreciated.
Thanks!
Alex
Here is the page rendered in Safari and IE side by side: http://screencast.com/t/b4YnDKANsg91
Here is the header code:
/* =Header
-------------------------------------------------------------- */
#header {
padding: 15px 0 0 0;
}
#site-title {
float: left;
font-size: 30px;
line-height: 36px;
margin: 0 0 4px 0;
width: 300px;
}
#site-title a {
color: #000;
font-weight: bold;
text-decoration: none;
}
#site-description {
clear: right;
float: right;
color: #006400;
font-size: 23px;
font-style: regular;
margin: 45px 0 10px 0;
width: 610px;
}
/* This is the custom header image */
#branding img {
border:none;
clear: both;
display: block;
}
/* This is the search form in the header */
#searchform {
float: right;
margin-top: -30px;
z-index: 500;
}
I can't be certain without seeing the full CSS, but I suspect a overflow:visible would solve this. Another selector may be setting it to clipped or hidden... If that doesn't work, try setting the height to em units instead of pixels (2em, for example).