Getting Responsive Div button banner to work

weikelbob
weikelbob used Ask the Experts™
on
Hello,

I'm trying to make my banner mobile responsive.

Attached is the banner.

I've sliced it into 7 images, I don't think I did my slices with the same heights but other than that it is a start.

Here's my html so far:

<div class="buttonscontainer">
	<div class="blog1">
		<a href="http://www.adultclothdiapers.org/reusable-adult-diapers-s/106.htm"><img src="/v/vspfiles/assets/images/blog.jpg"/></a>
	</div>
	<div class="6buttons">
		<div class="toprow">
			<a href="http://www.adultclothdiapers.org/reusable-adult-diapers-s/106.htm"><img src="/v/vspfiles/assets/images/acd1.jpg"/></a>
			<a href="http://www.adultclothdiapers.org/reusable-adult-swim-diapers-s/108.htm"><img src="/v/vspfiles/assets/images/swim2.jpg"/></a>
			<a href="http://www.adultclothdiapers.org/mens-washable-underwear-s/109.htm"><img src="/v/vspfiles/assets/images/mens3.jpg"/></a>
		</div>
		<div class="bottomrow">
			<a href="http://www.adultclothdiapers.org/womens-incontinence-panties-s/100.htm"><img src="/v/vspfiles/assets/images/womens4.jpg"/></a>
			<a href="http://www.adultclothdiapers.org/adult-diaper-covers-s/110.htm"><img src="/v/vspfiles/assets/images/covers5.jpg"/></a>
			<a href="http://www.adultclothdiapers.org/underpads-and-sheets-s/111.htm"><img src="/v/vspfiles/assets/images/pads6.jpg"/></a>
		</div>
	</div>
</div>

Open in new window


Here's my CSS so far:

.buttonscontainer
{
float:left;
text-align:left;
width:1140px;
height:320px;
}

.blog1
{
width:501px;
height:320px;
float:left;
}

.6buttons
{
width:639px;
height:320px;
float:left;
}

.toprow
{
width:639px;
height:158px;
float:left;
}

.toprow img
{
float:left;
}

.bottomrow
{
width:639px;
height:162px;
float:left;
}

.bottomrow img
{
float:left;
}

Open in new window

banner-April22-2016.png
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
If you are not going to use a framework such as bootstrap or wordpress, and you are coding responsive, I suggest you learn about target / content = result.  Responsive Web Design

If you want your images to shrink, take the target width, say 100px and divide it by the content, the current image width say, 586px. = 0.1706484641638225

100 / 586 = 0.1706484641638225

So, ...

<img src="/v/vspfiles/assets/images/womens4.jpg" style="max-width:100%;width:0.1706484641638225%"/>

You can use your computer's calculator to calculate the results.
David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
"Slicing" is old thinking. It's more important now than ever to think of things as separate layers (which does not imply absolute positioning). I see 7 images plus a background image for the green pattern background. And it might be desirable for the leaves to the right of "to blog post 1" to be a separate image.

Those 6 items would be best marked up as a <ul> with <li>s. You can set a max-width on the list and allow the items to be in 3 columns for displays that are wide enough and then go to fewer columns to accommodate narrower viewports.

Also all 8 text labels would be better as text and not included in the images.

Author

Commented:
Could you explain, Kravimir, I like your style but I lack the ingenuity to impliment it. If you have specific code detail or articles to site that would be great. I am new to responsive design.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

greetings  weikelbob, , the chopped image arrangement you use, is not so simple or direct application of CSS, to get a good responsive layout, and changing width as percentage of container.

here is my attempt to do this, I could NOT use your <div> arrangements, and the use of CSS float:left , did NOT give proper height response to the containers. Images in HTML are inline elements to begin with and can be horizontally stacked, so I did not need to use any FLOAT in CSS. This requires some precise chopped image sizes, I use a blog.jpg as a 501x320. And I use 6 button images that are all 208x160 as example here-208x160  mens3.jpg
this is my HTML layout -
<div id="buttonsImg">
<a href="http://www.adultclothdiapers.org/reusable-adult-diapers-s/106.htm"><img id="imgBlog" src="blog.jpg"/></a><div id="rightImgs">
<a href="http://www.adultclothdiapers.org/reusable-adult-diapers-s/106.htm"><img src="acd1.jpg"/></a><a href="http://www.adultclothdiapers.org/reusable-adult-swim-diapers-s/108.htm"><img src="swim2.jpg"/></a><a href="http://www.adultclothdiapers.org/mens-washable-underwear-s/109.htm"><img src="mens3.jpg"/></a>
<br /><a href="http://www.adultclothdiapers.org/womens-incontinence-panties-s/100.htm"><img src="womens4.jpg"/></a><a href="http://www.adultclothdiapers.org/adult-diaper-covers-s/110.htm"><img src="covers5.jpg"/></a><a href="http://www.adultclothdiapers.org/underpads-and-sheets-s/111.htm"><img src="pads6.jpg"/></a>
</div>
</div>

Open in new window


and this is the CSS -
<style>

#buttonsImg {
text-align:left;
max-width: 1140px;
min-width: 400px;
}

#buttonsImg a{ border: 0; }

#imgBlog {
width: 43.94%;
vertical-align: top;
}

#rightImgs {
display: inline-block;
vertical-align: top;
width: 56%;
}

#rightImgs img{
vertical-align: top;
width: 32.54%;
}

</style>

Open in new window


If you use <img> that are stacked horizontally, then you can NOT have any spaces or line-breaks between them, so that's why my HTML has long lines of <a><img> .
If you place and spaces or line-breaks in the code, then there are spaces between the <img>, which ruin the display.

There is not much room for adjustment in this.

Ask questions if you need more about this.

Author

Commented:
What am i doing wrong?

http://wbuaq.fcaem.servertrust.com
OUCH, , I looked at your page code (HTML) for -
         http://wbuaq.fcaem.servertrust.com
and it really confuses me? ? ?, You have incorrect and overlapping HTML containers,
you have a large DIV as
    <div id="div_articleid_2">
which is inside of the <table>, and inside of a <td>, , BUT the end of the <div id="div_articleid_2"> as </div> is incorrectly OUTSIDE of the <td> and the <table>, which may be distorting the correct display of the table? ? ? You need to place a </div> BEFORE the </td> that contains the <div id="div_articleid_2"> . There are other INCORRECT HTML groupings in your page. And I really do NOT understand why there is a <table> for the content, the table does nothing to help the display, and it has a compleatly empty td as -
<td valign="top">
</td>

why is there an empty <td> ? ? or a <table> at all?

I am also really confused by the relevant CSS arrangements for this page, it has really inconsistent page Responsiveness, just drag your browser (in laptop or desktop view) from a full screen width, to a very narrow width. There is inconsistent and unnecessary side margins for the main content? ?

But more to the point here for your image banner in this CSS -
    view-source:http://wbuaq.fcaem.servertrust.com/v/vspfiles/templates/257/css/homepage.css

there is this CSS -

/* CONVERTS ALL IMAGES IN ARTICLE 2 (HOMEPAGE) TO BE RESPONSIVE */
#div_articleid_2 img {
  display: block;
  max-width: 100%;
  height: auto;
}

which is destroying the display for the images in the -
    <div id="buttonsImg">
banner

Author

Commented:
Yes, this is volusion. It has crazy code. I disabled this:

/* CONVERTS ALL IMAGES IN ARTICLE 2 (HOMEPAGE) TO BE RESPONSIVE */
#div_articleid_2 img {
  display: block;
  max-width: 100%;
  height: auto;
}

What do I do next?

http://wbuaq.fcaem.servertrust.com
you should try learn to experiment with the % amount of the widths used in the elements, as your IMAGES for the six buttons are NOT the same size as the ones I used to get my precise positioning and sizing.
First you need to change the  #rightImgs  CSS width to 55%
And you also need to NOT have any spaces or line breaks between the blog image and the
   <div id="rightImgs">

since your images are NOT divided correctly to get a symetical display, (as you Image does not have need symmetry for the 6 buttons), you may can just increase to 6 button images CSS width a small amount.

Author

Commented:
I played with it but I did something wrong.

Got rid of spaces.

Played with percentages until it resized well on a desktop (resizing desktop screen wide then skinny)

Went to check on Google Chrome and all mobile devices cut off the banner.

What did I do wrong?

Author

Commented:
I see, I had to take out min-width:400px; What was that for?
I did not configure this to go into a single column when the device width got below 500 px. . . .
 So now a days, there are almost NO mobil phones that have less than 456 px width in portrait, so your display gets too small below about 450 px, as you have it now, so I just added the min-width:400px; to try and keep it some what workable even below 400 px width. And they do NOT cut off the banner at 350 px width, you merely have to finger scroll to the right to see the banner, and any and all who still have a little screen below 550 px are used to scrolling to the right to see all of the page display. .

Author

Commented:
Wait there's a major problem. I had the code in the "Every page" template - the hard code for all pages. When I placed it back on the home page, the editor automatically puts in white space. It breaks it.

Is there a workaround. I'm using a website from Volusion.com ecommerce.

Thanks.
sorry, I could not find anything on the Volusion.com templates and compatibility. I have never even heard of the Volusion.com for web orders. Some CMS like wordpress require that for NON template additions you need to have certain requirements meet. But I don't do much in wordpress or volution so I can't say what the problem may be.

Just a suggestion, , much on your page seems Dated as in old and out of date, like your JQuery version, from many, many years ago. You may can update some of the operational things to improve your site?

Author

Commented:
Just used margin-left:4px to correct for the space.

Now it looks good on desktop but is broken in mobile devices. If you look, there i a line or a small discontinueity in the middle on the bottom.

Tried adjusting widths up to .001 and still breaks.

Could you help me with this? I don't think it is a volusion problem.

http://wbuaq.fcaem.servertrust.com
I tried some changes, but as I told you before, the Bootstrap setup, give the page a sporadic responsiveness. It should not have the left and right "SPACE" (margin) on both sides when the screen becomes less than 1100 pixels or so. And the bootstrap is bumping this display at certain widths. I tried to do minute adjustments, but do not have the time to keep testing this. As to the problem "a line or a small discontinueity in the middle on the bottom", , I have found it a Large help in precise image splits like this to make the container background a complimentary color so any small cracks in the display will not be noticeable. You can ass the background to this -

#buttonsImg {
text-align:left;
max-width: 1140px;
min-width: 400px;
background: #3cb54b;
}

Author

Commented:
Sounds good.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial