I just found a lot of posts but none of them show a clear answer that works: how can I display 3 items in a row when user is desktop and stack them vertically when in mobile?
I see this is possible with no hacking for product grid (but products are shown two by row), probably I can use the something similar for the same result.
I have created this sample which is able to show 3 items when desktop and show 2 in a row and 1 in another. That's close to what I want:
<ul class="products-grid products-grid--max-4-col first last odd">
<li><img alt="" src="http://192.241.128.153/media/wysiwyg/index/pencil.jpg" />
<div class="product-info" style="min-height: 167px;">
<h2>Assine</h2>
</div>
</li>
<li><img alt="" src="http://192.241.128.153/media/wysiwyg/index/pencil.jpg" />
<div class="product-info" style="min-height: 167px;">
<h2>Vote</h2>
</div>
</li>
<li><img alt="" src="http://192.241.128.153/media/wysiwyg/index/pencil.jpg" />
<div class="product-info" style="min-height: 148px;">
<h2>Receba</h2>
</div>
</li>
</ul>
Thanks!
You can achieve this using a media query in your CSS such as..
#media only screen and (max-width: 770px) {
.products-grid li {
width: 100%;
}
}
Don't forget the product list version too.
Related
<body>
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="navbar-inner" style="position: center;">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Cottages</li>
</ul><a class="navbar-brand" href="#"><img src="http://placehold.it/150x150"></a>
<ul class="nav navbar-nav">
<li>Attractions</li>
<li>Contact</li>
</ul>
</div>
</nav>
Here's my code. I'm trying to put the brand in between the "Cottages" and "Attractions" links and center everything horizontally while keeping the layout responsive. Plus, I want the brand to extend vertically outside the navbar (existing without changing the height of a navbar).
If there is a better way to do this (rather than the HTML I have now) please let me know! Thank you.
Edit: here's a JSFiddle with my current code. Although I must say that the code results differently in my browser...
Use a wrapper class:
#wrapper {
margin:0 auto;
width:500px;
}
Apply this like this.
<div id="wrapper">
<nav> </nav>
</div>
if you need to resize it on a specific size based on a view-port you may need to use css #media Queries to alter the css based on a specific width.
Is there a way to set the panel bar to a specific height (ie. 300px), and make that specific section scrollable if it's too long?
Assuming that you have your panelbar defined as a ul, something like:
<ul id="panelbar">
<li class="k-state-active">
<span class="k-link k-state-selected">My Teammates</span>
<div style="padding: 10px;">
<div class="teamMate">
<img src="../../content/web/panelbar/andrew.jpg" alt="Andrew Fuller">
<h2>Andrew Fuller</h2>
<p>Team Lead</p>
</div>
<div class="teamMate">
<img src="../../content/web/panelbar/nancy.jpg" alt="Nancy Leverling">
<h2>Nancy Leverling</h2>
<p>Sales Associate</p>
</div>
<div class="teamMate">
<img src="../../content/web/panelbar/robert.jpg" alt="Robert King">
<h2>Robert King</h2>
<p>Business System Analyst</p>
</div>
</div>
</li>
<li>
Projects
...
</li>
</ul>
You should define a CSS style as:
#panelbar {
height: 300px;
overflow-y: scroll;
}
See an example here: http://trykendoui.telerik.com/#OnaBai/ifus
The solution above scrolls the entire control. Here's how to scroll the panel's items.
Click here for the Dojo example
I'm trying to separate this ul to be two columns splitting after "Lotus Notes Administration (this is for my resume) Can someone help me with the CSS?
<section>
<h4>Technical Expertise</h4>
<div id="skills">
<ul>
<li>HMTL5</li>
<li>SQL</li>
<li>XHTML</li>
<li>Networking</li>
<li>End User Training</li>
<li>Inventory Management</li>
<li>SDLC</li>
<li>Active Directory Administration</li>
<li>Lotus Notes Administration</li>
<li>XML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>SEO</li>
<li>Technical Support</li>
<li>Procurement</li>
<li>Software Testing</li>
<li>Project Management Best Practices</li>
<li>GPO</li>
</ul>
</div>
</section>
You could do something:
<div class="Skills>
<div style="float: left; width: 50%;"><ul>List A</ul></div>
<div style="float: left; width: 50%;"><ul>List B</ul></div>
</div>
I've looked around and tried the suggestions to center an image, and it usually works just fine, but I've got a situation where something isn't right.
If you go to the test page:
http://www.503rephotography.com/_temp/ - you will see the image is pushed to the right a little bit, and if you increase or decrease the size of your screen, you will see it may shift a little further away from the center position.
I'm new to CSS and may have something messed up that is making this not work; I used some tips on here to make the div with the content on the page be somewhat centered. Now I'm just trying to center an image within that div box. Any help is much appreciated!!
You have to create a div container with margin-left:auto: and margin-right:auto; to center the content.
<div id="container">
<div id="header">
<h1 id="logo">
<a href="http://www.503rephotography.com">
<img src="images/logo.png" alt="503 rephotography">
</a>
</h1>
<ul class="navbar">
<li class="button">SERVICES</li>
<li class="button">PORTFOLIO</li>
<li class="button">CONTACT 503</li>
</ul>
</div>
<div id="topbar"></div>
<div id="content">
<img src="http://www.503rephotography.com/_temp/slides/1.jpg">
<div class="sub">
<p>Content will go here....why can't I get this div box to be centered???</p>
</div>
</div>
</div>
Try this fiddle see if it's what you need: http://jsfiddle.net/ftPa3/
I want to align the images beside the text, and also they need to be click-able. How can I do this? Do I need to make unordered list?
Here is the whole page: http://jsfiddle.net/dzadze/68WrB/
<div>
<a class="pic_link" href="#">
<img src="http://f.cl.ly/items/3Q1e0G1Y2b2Q2U0N1g1q/fb.png">
</a>
Следете не <br>на FACEBOOK
<a href="#" class="pic_link">
<img src="http://f.cl.ly/items/413J3G3e152p1g3W0t0l/ftp.png">
</a>
<a href="#">FTP Логин
</a>
<a class="pic_link" href="#">Што е Photobook</a>
Процес на изработка
</div>
Not the only solution but adding this to your css seems to work :
footer a{
display: inline-block;
}
It sounds like using CSS floating would be a good place to start, based on what you've said.