Full Width Responsive Bars

[RichiamOrganics]

Hi,

I am in the process of migrating my store over to 3Dcart - which I have delayed until they sort out some of these debilitating bugs with the new V7. However I need to start working on this so I can be ready by the new year.

Could someone kindly advise me on how to create these full width bars, http://snag.gy/1MKb2.jpg in the 3Dcart software. I have been trying all weekend, with no success.

I have copied and pasted the exact same codes from the header and footer as well, which work fine. The issues start once I make minor changes to the css titles and add my own content, I loose things like background colour or formatting. I can't keep the exact code/class name because every change will automatically change the original too.

I have also tried totally new code, but I can't get all the formatting right. I know it is probably something small that I am missing, but I just can't seem to find it. I have fairly basic HTML and CSS skills to get by.

My main aim is to have 2-3 of these on any given page, with varying content such as clickable text boxes, images, etc.

Any help would be grateful.


P.S. I am based in Australia, and it is good to see many Aussie stores using 3Dcart, but after reading all the issues with the new V7, I hope I have made the right choice!!


Regards,

Richard

[elightbox]

You can't have full width bars within the content area unless the content area is also set to full width. The content area will constrain the width of whatever is in it. That is why it will work in the header and footer and anywhere above or below these.

[RichiamOrganics]

Thanks for the feedback elightbox.

I am looking at one of the following responsive 3Dcart templates - Barber - Sofa place or Genesis. I believe they are all structually the same.

How would I then add extra bars with content/columns to these existing templates.

Would they be inside the footer div or above?

Ulimately I would like a similar effect to the bottom of the electronics theme http://electronics-preview-com.3dcartstores.com/

Regards,

Richard

[elightbox]

RichiamOrganics You would include that mailing list bar above the footerContent DIV within the footercontainer DIV

[RichiamOrganics]

elightbox thanks for confirming that what I was doing was right. I knew I was on the right path, but it was just something minor. I just discovered that I was placing the CSS code at the very end of the template page, rather than under the section title *custom styles*.

As you can see now http://richiamorganics-com-au.3dcartstores.com/, I have a base to work with. Some formatting, etc to tidy up a little and decide on the content.

One problem I am having is with mobile, as it is not formatting correctly. Do you know what is happening here. http://snag.gy/PwsgN.jpg

Another problem, which might be related is that the mail list box is not showing in mobile and responsive. Any ideas as to why?

Thanks again for your help.

Richard

[thecartdesigner]

RichiamOrganics Is your Mailing List selected as "Enabled" in your "Modules" ?

[elightbox]

RichiamOrganics In the Home Page banner, it says "If your not satisfied ...", it should be you're or You Are

for class div.middle, add overflow: hidden; to the CSS
OR
Add <div style="clear: both;"></div> after you close the inner DIV


for the boxes, you need to have media queries to size them according to the size of the screen. So for smaller screens it would be 100%, for large screen 300px

one more thing to fix. For the boxes you have background-color:#;

Here are some good explanations of why this happens. I just learned this myself working on your site:
http://stackoverflow.com/questions/2...earfix-is-best
https://stackoverflow.com/questions/...614707#2614707

[RichiamOrganics]

thecartdesigner just checked it is definitely on, so I turned it off and on again and it seems to be working now. Could be the ongoing V7 module issue many have been talking about.

elightbox thanks for that tip which seems to have fixed most of the issue, but the formatting is still out on both Mobile phone http://snag.gy/LRYPN.jpg and Ipad http://snag.gy/t8QU9.jpg in portrait only.

Does this have anything to do with margins/padding, etc. as, I didn't know how to automatically center Divs within Divs so I just used margin/padding.


I put the following code under the "@media only screen and (max-width: 767px)" - I presumed this is where it should go.


#box1 {
width: 100%;
}
#box2 {
width: 100%;
}
#box3 {
width: 100%;
}



Also thanks for correcting my grammar, never been my strong point!

Regards,

Richard

[elightbox]

RichiamOrganics

for box 2 you have: margin-left: 40px;, that is your problem.

to solve the problem and properly position your 3 box divs look at this answer, no sense in me pasting it here:
http://stackoverflow.com/questions/6...ly-spaced-divs
--------------------------
I don't see the Width: 100% in the CSS. did you clear the Cache? You need to click "View Store" in the admin after you make changes to the CSS
And yes, that is where you would put it.

[RichiamOrganics]

elightbox thanks for the link. Tried some more code from the examples on the site. Most things worked, but still some formatting issues.

I will spend some more time on it, but if I can't get it right I will get Shaun to fix it up properly when he does some custom menus for me.

Really appreciate the time you have taken to help me.

This forum is one of the reasons why I choose to migrate to 3Dcart, I just hope they can sort out the V7 issues quickly.

Regards,

Richard

[RichiamOrganics]

Thought I would up date this just to say that I have now got all the DIVs to work on all devices.

Now just to make good use of the new DIVs, and make the design work for me.

The real fun part is ahead of me now!