Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 months ago.
Improve this question
The store page of my website is made using woocommerce.php file, the store page itself is fine, but I would just like to center the products.
Is there a way to do this?
Also, within the single product view when clicking from the store page the image and description of the product is huge and not correctly positioned.
Is there a way to style single product images and descriptions?
Here is the live link to my web site.
You can choose between that 2 ways:
1) CSS way — You should need to add this CSS rule to the styles.css file of your active theme:
#media only screen and (min-width: 992px) {
.woocommerce center > .col-md-10 {
margin: 0 8.33333333% !important;
}
}
This should solve your centering issue on all WooCommerce pages
2) HTML structure way — This problem can be solved in your html structure.
Actually you got this:
<div id="primary" class="col-md-12 mb-xs-24">
<center>
<div class="col-md-10">
You should need to have this instead:
<div id="primary" class="col-md-12 mb-xs-24">
<div class="col-md-12">
This will make the display at 100% inside the container instead of 83% to the left.
As Rob suggested in the comments you should remove obsolete <center> html tag…
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
My home page styles work perfectly fine but when I keep coding the css for another html page, the layout breaks in the home page. For example, I have some content in the home page but I want to remove them in other pages and when I do, it breaks the layout in the main page and if I try to fix then the second page won't be the way I want. How do I fix this?
You've got to read some CSS books/guidances.
A very brief info to see (part of) what you can do:
Use different class names for differently styled sections. You can combine classes like this:
<div class="box headerpage">....</div>
<div class="box innerpage">....</div>
and in CSS it would be:
.box {
// main style
}
.box.headerpage {
// addition for header page (element with headerpage class specified
}
.box.innerpage {
// addition for inner page (element with innerpage class specified
}
You can also alter the style dependant on element's ID:
#myDiv.headerpage {
}
#myDiv.innerpage {
}
you need 1 css file for all pages. use different classes an ids and then your css will not override previous settings
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I just started to work with HTML and I wanted to make a site which has got a colour on the upper side, an another colour on the lower side. I did some research, and I discovered that you got to work with divs. Can you make a nice div in HTML, or do you got to make a div in css (which does fit correct to my site)?
Create your divs in your body with id's
<div id="upper"></div>
<div id="lower"></div>
and then using css you can change some attributes such as color and size, for example in either an external css file or inside of style tags you can do this.
#upper {
background-color: blue;
width: 100px;
height: 100px;
}
#lower{
}
w3schools.com is a great resource for beginner web development, check it out.
Div is a html element. You can set its properties through css but a div doesn;t exsist in css. It is just a way to divide up section in html. Here is some basic information about divs.Divs Info
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Here is my website:
maitxhomes.com/main.html
It looks great (I hope) on desktop browsers, but when I pull it up on my phone, the blue section's content is just in a big column that extends all the way down, and the same thing happens with my footer's content. I'm not sure if this has something to do with the <ul> in my HTML code, or the CSS? Is there a #media query I can add to address this?
In order to design layout responsive on various devices like mobile-phones, tablets, desktops etc. you link bootstrap file to your website acordingly i.e if you want your website for desktops you use ".col-md" or "col-lg" class.
but if you want to display your website correctly on small devices like mobile phone... you should add 'col-xs' class.
for ex:
<div class="container">
<div class="row">
<div class="col-xs-3 col-sm-4">content 1</div>
<div calss="col-xs-9 col-sm-8">Main content</div>
</div>
</div>
I think, this should solve the issue you are facing.
for more info:
go through the following link
Bootstrap Grid Options
Remove the rule on .container that sets the width. Also remove the rule from tri-section that sets a height.
Remove from line 3:
.container {
width: 960px
}
And line 189:
.tri-section {
height: 130px;
}
By writing explicit height and width values, you are making those element non-responsive.
Just to add a little bit to my answers, I've addressed your specific problems, but you should really consider developing websites with a mobile first approach if you at all expect users to interact with your site from a non-desktop sized screen.
You are likely going to run into more issues taking a desktop first approach.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I apologise in advance if this is a really obvious and noobish question, but how do i segment a web page into multiple portions, with each portion of the webpage filling the screen in it's entirety?
A good example of what i wish to do would be similar to treehouse's homepage when i segment the webpage into multiple portions e.g "home","about us", etc.. I've tried right clicking on the webpage and having a look through the css but did not see height and/or width applied to anything on the page.
How exactly does treehouse, and others segment their webpages?Do they simply make use of a background image or is there some other method of doing so?
When you give the html, body elements a the css property's:
html, body {
height: 100%;
width: 100%;
}
And in your html you makke a couple of div's like this:
<div class="fitScreen">
content 1
</div>
<div class="fitScreen" style="background-color: red">
content 2
</div>
<div class="fitScreen" style="background-color: blue">
content 3
</div>
<div class="fitScreen" style="background-color: yellow">
content 4
</div>
And you give them a css property of height: 100%; They fill the whole screen.
Demo here
EDIT:
Or if you just want 1 element that fills the screen, and all that is beneath that element has a height of auto, just just give make one div with the class of fitScreen.
And beneath that another element with your own content.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am trying to set positions of forms. My teacher says this can be achieved using <Frameset> tag but this tag creates borders between the two frames and I don't want those borders. I have basically have 2 forms , one contains basic text and the other one contains some images. I want both these forms to display side by side not one below the other. Is there any way to achieve this?? please help.
Here you go
http://fiddle.jshell.net/FBXZC/
HTML
<div class="wrapper">
<div class="halfwidth">
I am One Half
</div>
<div class="halfwidth">
<img src="http://www.metal4.de/wp-content/uploads/2012/09/steel-panther.jpg" alt="">
</div>
</div>
CSS
.halfwidth {
display: block;
width: 50%;
float: left;
}
PS: get yourself a new teacher or go complain about him, he obv. has no idea of anything.
You can use css to style forms.
try this fiddle for the sake of demo.
form
{
background-color: red;
}
Welcome to SO and I'm glad to see a new student in web development. I don't want to go against your teacher, for he/she is probably teaching you the behaviors of frameset, but frameset is not the best way.
This is what you should do :
<div class="wrapper">
<div class="left-side"></div>
<div class="right-side"></div>
</div>
DEMO
I suggest you to use Dreamweaver to give you the exact position for each element. In general tags define the positions.