Make related products full width

Hi There
I would like to make related products full width.
http://plan-itcards.businesscatalyst.com/our-products/birthday/birthday-cute/ck266
I would like to make it span the bottom of the page.
I’ve been going through the layout and the css but can not find a solution.
Any help gratefully received
Tom

Hi Tom,
The issue is probably with the 2 <br> tags:
<div class="shop-product-small clear"> <h5><a href="/our-products/juvenile-age/pclm137">PCLM137</a></h5> <div class="image"><a href="/our-products/juvenile-age/pclm137"><img id="catsproduct_5237972" src="/images/Cat Small/Products/PCLM137.jpeg" alt="PCLM137" border="0"></a></div> <ul> <li class="price">Price: <strong></strong> </li> <li class="stock">In stock: <strong>N/A</strong> </li> <li class="quantity">Qty: <strong><input id="Units_5237972" class="productTextInput" name="AddToCart_Amount" type="text" value="1"></strong> <input class="productSubmitInput" name="AddToCart_Submit" type="submit" value="Add to Cart" onclick="AddToCart(16981,5237972,'',3,'','',false);return false;"></li> </ul> </div>
</td></tr></tbody></table>
<br> <br> Take these two out it should fix the issue!
</div>
Peter

Similar Messages

How can I make my footer full width of the screen with a fluid grid layout in CSS?

Any Ideas?
#footer {
clear: both;
color: #FFFFFF;
min-width: 100%; // I have tried max-width and width as well.
margin-right: 0px;
margin-left: 0px;
background-repeat: repeat-x;
background-image: url(/images/footer.jpg);
I know it is being over-ridden by
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;

Move your <footer> tag below the closing .gridContainer </div> tag.
Live example:
Alt-Web :: Fluid Grid Test #4
Nancy O.

Full Width Composition

I know you can do a full width slideshow now, but that is not what I'm looking for.
I want the ability to have a button that makes a hidden full width object appear. Currently I don't know of a way to accomplish this with any of the default widgets in muse.
Anyone know of a workaround?
Thanks.

Can I manually set Targets and Triggers?
Otherwise I can't make the Target Element 100% Full Width - It defaults to the max page page area, not 100% full screen width.
I think I know how to use compositions, but I just can't figure out how to set the Target to 100% page width once the trigger has been activated.

Full Screen Slide Show and Full Width Object Odd Behavior

This look slike a bug to me. It happens in both the shipping version and the new native beta version of Muse.
I made a full screen slideshow. Put a full, browser-width rectangle at the top of the page for the Nav Bar. Rectangle is 75 pixels deep and touches the top of the browser.
Preview in browser, all is well.
Now, put a horizontal menu on top of the rectangle and set it to be also 75 pixels tall. Preview in browser and the full-width horizontal rectangle disappears. Make it not full-width, and it comes back.
If you can't re-produce this, I can post my page on Business Catalyst or send a file to Adobe.

By default iWeb resizes your images to no more than 800X600. They playback in a window.
If you want viewers to see the full size images you want to make a "Photocasting" page.
http://www.apple.com/ilife/iphoto/features/photocasting.html

I have Firefox 19 and the screens are narrow. How can I get full width screens, like I get in IE? Full Screen command only makes my screens taller, not wider.

I just got a new Dell Optiplex computer with Windows 7. I installed Firefox 19 on it. The web pages come up narrow, with borders on each side. So the content of the screen is smaller than what I've gotten in the past with Firefox 3.6 on my previous computer. I did the Full Screen command, and that only made the screen taller rather than giving me a full screen (such as I get with the same web pages in Internet Explorer). I've also tried enlarging the text, but that throws off the format of the web page so some parts of it overlap.
What can I do to get a full screen, including full width?
There is a box below this Details box called "Troubleshooting Information" which says I should click Allow and then click Install. Since I don't know what would be installed on my computer, I did not do it.

The Troubleshooting Information extension adds some useful information to your post, but in this case, I don't think it's really needed.
Zoom is your best bet. To make it work for you, I have two suggestions.
(1) Switch from "text only" zoom to "full page" zoom. This is proportional like in IE.
View menu > Zoom > ''uncheck'' Zoom Text Only
If you are using the compact menus with the orange Firefox button, tap the Alt key to display the full classic menu bar.
(2) Install an extension that can default your view to a higher zoom level automatically to save time when visiting new sites. Here are two candidates:
* [https://addons.mozilla.org/en-US/firefox/addon/default-fullzoom-level/ Default FullZoom Level]
* [https://addons.mozilla.org/en-US/firefox/addon/nosquint/ NoSquint]
With that combination, can you minimize your eyestrain? :-)

How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)

How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
and I know it is being over-ridden by
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;

Abdelqader Alnobani wrote:
How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
and I know it is being over-ridden by
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
Logically a structure something like below should work BUT whether or not it will upset the FG I don't know as I wouldn't ever use it.
<div class="gridContainer">
Top Code Section Goes Here
</div>

<div id="fullWidth">
Full width section goes here
</div>

<div class="gridContainer">
Bottom Code Section Goes Here
</div>

Full Width 'Basic' Slideshow

I am trying to make the slideshow on my page full width, which will expand with the window size. I have dragged to the edges of the screen but it doesn't go to edge of the screen when previewing in a browser.
Could someone please help?!
Thanks,
Jon

100% width is a CSS BASIC. I don't get it. Designers are using 100% in their designs...it's very popular. How did this one roll off the table? 100% slide shows are years old. Nothing new...I don't get the "miss" on this but it would be nice to have a Creative Cloud membership that has complete products rather than a bunch of them that are constantly being sourced for customer feedback. No one wants a produict in eternal preview and it used to be that "previews" or betas were a user's option.
I think Adobe needs to remove "preview" products from CC - no one wants to be met with the frustratin of a product that does not have all the considerations...esoecially when they are paying $50 a month. it's like paying for pain.
In the case of not having 100% width for slideshows, it's kinda like building a house with doors.

Insert Image with full width

Hello,
I'm trying to insert a full-width image (like a header, or a graphic cover, footers and stuff) but no matter the size I make the image on Photoshop, it always shrinks when I insert it in Adobe Acrobat XI
I know I can drag and make it full-width, but then I loose a lot of graphic quality in the process. Is there a way to disable the auto-resizer when adding new images?
Thanks!

Actually if I'm not mistaken, the pixels do matter, but the relation between pixels/size are determined by the DPI you set to the image.
My PDF file is 110 DPI (110 pixels per inch), and the images I do in Adobe Fireworks are 110 DPI as well.
No matter the size I do the images, they always get resized to about 70% of the page's full width.
I'll take some screenshots of the process and post them here
Here:
Creating the image (21cm wide (100% of pdf's width), 3cm height.. 110 dpi)
Adding it to the PDF trough the Tools menu bar (right side)
The output... A image with 70% of the PDF's width, where it should be 100%
And as you can see, the PDF's DPI is set to 110, the same as the image
So I can only conclude that Acrobat is resizing my images, maybe to fit the margins or something, and I would like to disable that :]

How do I create a web mock-up using Full Width Photo's

Greetings & Help!
I'm trying to create a full width photo layout using
Fireworks CS3 & Dreamwaver CS3 without the photo's being tall.
Exactly as the following websites - which all seem to be
using the same size of photo or very close to it.
This site is static with full width photos that are not tall.
http://www.jenniferhandyproperties.com/selling
This site is static for the most part and full width photos
that are not tall
http://www.gnvpartners.com/web/
This site is Flash with full width photos that are not tall.
expodesigncenter
I would love to create a flash site just like expo but at
this point I would settle for a static photo with the same size
being the same on each page.
Also I would like my site to be a liquid layout so the photo
and everything else (text, Links etc) on the page flows correctly.
The problem...
I'm trying to use photo's from Istockphoto.com. The size of
the photo's they offer are
425 x 282 px (5.9" x 3.9")
849 x 565 px (11.8" x 7.8")
1698 x 1131 px (5.7" x 3.8")
I'm selecting horizontal photo's. I do not know how to match
the same width, height and appearence as the websites I mentioned
above.
If I choose a photo that fits the width then the length is
too long. Also if I choose a large photo and have to crop it then
most of the detail of the photo is lost.
I'm attempting to create a mock-up for my web in Fireworks
CS3 and after search Adobe and www I came across the mock up should
be 1004px which would end up being 1024 with vertical scroll bar
and small margins.
I also have Photoshop & Flash CS3 but should mention (if
you haven't already guess it by now) I am a rookie when it comes to
creating a website.
So if you can offer a solution in "Non-Tech Terms" I would
appreciate it.
Thank you in advance for your time.

Hi Pixlor -
I'll do my best to answer your questions - within my ability
- which isn't much.
As far as "Tile" the photo - I've checked out the responces
I've received from other's on this post - and other posts - and on
each page for the "masthead" I just want one photo to be the same
size of the page width wize - and the height of the photo should
not be tall from the top of the masthead to the bottom of the
masthead. As far as what I mean by "not being Tall" - see next
comment...
I'm just attempting to duplicate exactly (or very close to
it) the same appearence and dimensions - "Width = side-to-side,
Tall = Height - as the websites I mentioned in my first post here.
Also if you check out Joey's website (who responded to my
post as well) basicly he has created the same thing that I'm
shooting for except he is using graphics. I have to use photos in
my masthead which will be of kitchen cabinetry or construction
photo's and must highlight every detail down to the shine of the
kitchen cabinets knobs - or close to it.
Due to this I can not have the photos of the masthead "tile"
from "width-to-width or top-to-bottom because the deatils in the
photo can not repeat or multiply to completely fill the masthead
head. Otherwize if I choose a photo of kitchen cabinetry which
highlights a kitchen sink - and if I tile this photo - from what
I'm learning from everyones responce thus far - I'll end up with
several of the same kitchen sinks and cabinets in the same photo.
I must stress I could be wrong in what I described directly
above due to my lack of tech knowledge! If this post was about a
2x4 or 2x6 or Green Building or what have you, It would be heck of
alot easier for me to completely understand what you pro's are
trying to help me with - which I completely appreaciate. Expecially
someone like you who owns a monitor the size of one of my work
trucks!
Which brings me to your next question...
Liquid layout -
Yes I am trying to end up with a liquid layout for my website
using Dreamweaver CS3. Hopefully using one of the pre-built liquid
layouts in Dreamweaver and modify it within my ability.
The main reason why I would like to create a liquid layout is
because most others construction firms in my industry - and in my
target market - have websites that completely consume a viewers
monitor - viewport - screen real estate - (i'm trying to learn your
tech terms) no matter what size viewport a viewer has, or how the
viewer resizes theirs.
I've also heard that a "Min & Max" code can be included
in a liquid layout so that it would limit the "liquidness" of the
layout so "Text Lines" won't stretch too long making it difficult
to read when a viewport size extends - and when the viewport shinks
- all the elements (or Div's) will reflow an maintain order and
visability.
1004 -
The only reason why I mentioned designing the Fireworks CS3
mock-up at a 1004 is because someone else mentioned they design
their mock-ups at a "Canvas Size" of 1004. Then most browsers
automaticly inlclude a scroll bar if the vertical content exceeds
below "The Fold". Thus with the addition of the automatic scroll
bar the page now becomes 1024 - according to this person.
She went on to mention according to "recent studies" - 56% of
viewers have 1024 x 768 and most computer manufacturs shipp them
this way. Then the following stats... 22% at 800 x 600, then 13% at
1280 x 1024, then 3% at 1152 x 864, then 1% at 1580 x 1129. She
also mentions most avearge viewers (every day Dick & Jane, Bob
& Besty) (excluding computer tech folks like yourself) - do not
resize - bother with - or know how to resize their viewport.
My personal note on this is most of my target market -
clients - just turn on their computer and surfs the net from
website to website without changing their viewport and when also
asked they "Feel" that a website looks much better - or more
profeshional - when the content completely fills up an entire
viewport.
"Feel - not - Think" -
Keep in mind I choose the word "Feel" & not "Think". In
my target market - Residential Construction - 95% of home
improvement decisions are made my the Woman of the houshold - not
the Man. That being in mind it is a proven stat (and not a sexest
comment) that women base most of their choices or decsions on how
something makes them "Feel". Where as most men make their choice or
decision on how they "Think".
Also most men attempt to keep their women happy and knowing
that if they don't then they will end up in the doghouse - ( not a
fun place to be trust me on this) and in addition most men do not
have much of a clue when it comes to the interior design layout of
a home, matching of paint colors, appliance choices or what have
you.
Wow that was a major side track I took -
Back to 1004 -
It's not that I'm intend in designing the mock-up in
Fireworks at 1004 - I just want to end up wth a liquid layout so
when my site is viewed by "most people" then my site will
completely consume a viewers viewport - or very close to it.
If I need to design the mock-up less then 1004 - or more then
- and still be able to end up with the same end result in a liquid
form - so be it.
I don't know the best way to proceed -
I'm just attempting to learn from others who respond and for
the most part those who have been kind enough and taken the time to
respond seem to be very knowlegeable about my issue at hand.
You might find this hard to believe but I am learning quite a
bit from all of you and I really do appreaciate it.
Well now that this responce is as long as the novel "War
& Peace" - I'll close here.
Travis

Content in the page not displaying in full width

Hello everyone,
We have a EP 2004s SR1 Portal with customized framework page and display theme.
When logged on to the protal, the first page(say home page) was displaying by leaving some width at right of that page (approximately the width is equal to scroll bar width). For remaining pages this is not the case...it is displaying properly i.e displaying with full width covered.
and one more thing is, this is happending in Production and QA machines...For Development machine it is working fine.
Could any one help me in this...
Thanks in advance
Regards
Sunil Chiluveru

In your style.css on line 187 you have this. Remove the max-width.
.section > .content {
    background-image: url('../images/frame/contentBg.png');
    max-width: 800px;
    padding: 4%;
    text-align: justify;
    color: #646462;
    overflow: auto;
Nancy O.

The mobile version of my Muse site doesn't display full width

Can anyone help me figure out how to make the mobile version of my site display full width? I've snapped everything to the full width using the blue lines, but the whole site is left justified. I reviewed the master page and everything seems to be in order.

You most likely have an empty box or text box that is off to the right in your design. Do a select all on your Master Pages and pages to see if you have any elements outside the right side of your design.

Adobe Muse Footer not full width in preview mode?

Hi, I originally had my footer 100% width when previewing in browser and preview mode, and now for some reason it is not 100% width. Not sure what I have done for this to occur and it doesnt make it any easier when in design mode it is 100% width. Any help much appreciated.

Just answered my own question, bounding box was not quite out to full browser width. To ensure it goes out to the full width keep dragging across until the guides turn red. I must of bumped it when I went in the masters page to do something and it was out by just a bees dick! Unreal....2 hrs of my life I wont get back haha :-)
PS...Do I get 10 points for answering my own question? ;-)

Full width blade-Q

Hi, Cisco Folks:
Can someone please help me to clarify the following doubts?
Q1. What is the pinning order of B250-M1 to IOM if I have 2 Server Ports with a fully populated chassis of 4 B250-M1?
I know that for a half-width, the pinning order will look like:
                                                  Pinned Blade #
Server Link 1 or Port 1 of IOM       Blade 1,3,5,    7
Server Link 2 or Port 2 of IOM       Blade 2,4,6, & 8
OR
                Pinned Blade #
Server Link 1 or Port 1 of IOM      Blade 1,3,5,    7
Server Link 2 or Port 2 of IOM      Blade 2,4,6, & 8
Q1.1
If I have the Server Link 1 connects to Port 1 of IOM, but Server Link 2 connects to Port 3 of IOM, will this change the pinning order?
Q1.2
If I have the Server Link 1 connects to Port 1 of IOM, but Server Link 2 connects to Port 4 of IOM, will this change the pinning order?
How about other combinations Like Port 2 of IOM (Sever Link 1) and Port 3 of IOM (Server Link 2)?
Q2. If I only install a Single M81KR in B250-M1, do I have to care about which Adapter Slot to install my PALO Card? My concern here is really Slot 1 is tied to IOM A and Slot B is tied to IOM B, is there such concept at all??
If there is such concept, then I would make sure that for a 4 blades setup, I would have 2 blades with PALO inserted into Slot 1 and the other 2 blades with PALO inserted into Slot 2,
Thanks.
SiM

./Abhinav
Let me try out once I have the opportunity and update you.
I am beginning to understnad more now esp. with your deep technical expertise. I appreciate your input.
1 more question lingering on my mind:
If I have only 1 PALO installed in one of the 2 Mezzanine Slots of a Full-Width Blade, AM I really using only 1 Server Link at all assuming I have 2 Server Links i.e. I made use of 2 FEX Ports?
Example: B250-M2
2 Server Links Per IOM/FEX to Each FI
My full Width blade is in Slot 1 & 2 or the TOP of the Chassis.
For half-width, I know it is very clear as in:
2-Server Link     Blade (Assuming I have 8 blades)
Server Link 1     1, 3, 5, 7 - Blade 1,3,5 & 7 will make use of this 10G link only
Server Link 2     2, 4, 6, 8
4-Server Link     Blade (Assuming I have 8 blades)
Server Link 1     1, 5 - Blade 1 & 5 will make use of this 10G link only
Server Link 2     2, 6,
Server Link 3     3, 7
Server Link 4     4, 8
Please help me to explain further as I know Cisco blades, but there is a lot I need to learn everyday.
Appreciate it.
KP

Full width headers

hello,
i know this should be basic but i have a full screen slideshow and i need a header bar and footer bar top & bottom of the screen.
the header and footer will not stretch full width only the width of the page.
the header did at first but only when "sticky footer" was unchecked until i added the footer and need it to stay at the bottom.t know what to do
any help would be appreciated as i am on deadline
i'm sure it's a simple fix but just unsure how to fix it
thanks

In previous releases you could "Snap" the edges of a div (box) to the sides of the gray-outermost area of the stage. This would "Snap it to Full screen width". That still works. But, I think your problem is that the item you want to scale, is an image. So, make a new div (box) and then place your image inside it as a "background fill" re-stretch the box to the sides, or click on the new "100% Width" layout feature. You should get the results you were looking for.
[email protected]

Full width glitch on Chrome

Hi, I am trying to make a portfolio website but I ame xperiencing many glitches across different browsers. I specifically am trying to have a full width page for my site but even though I make sure that my elements click on each end of the canvas, it still doesn't have full width on Chrome. On Safari, it looks fine. Why is this?
My website is www.imsonny.com
Thanks

I just realized, the website looks fine when you add www. , but when u just type in imsonny.com, it messes up. Interesting, anyone know? I really want to fix this.

Make related products full width

Similar Messages

Maybe you are looking for