× Got a CSS, HTML or webdesign question? Ask it here!

Mobile Responsive Banner?

1 year 3 months ago #16501 by paradoxsc
I've seen info on the forums before about this, but I can't find it with searches.

I just want to know how to create and implement mobile responsive banners on my DN site.

Preferably a scrolling version like the stock one deco provides, but static will do just fine if that is too hard.

LIKE THIS:

Attachments:

Please Log in or Create an account to join the conversation.

1 year 3 months ago #16505 by brenden
Hi,

This would come down to a lot of custom CSS to get this to happen at this stage. Mobile is a core part of DN8 but at this time the CSS would vary on the site and the banner code you're using.

Here are some freebies you can take a look at. dcrazed.com/free-responsive-jquery-image-sliders/

According to the site they are mobile responsive but they will require you to implement them as custom HTML.

Cheers,

Senior Product Manager
Wilcom - Sydney, Australia



Please Log in or Create an account to join the conversation.

1 year 3 months ago #16508 by paradoxsc
As stated before, I don't need it to do anything fancy if it's too complicated.

Are you trying to tell me a static image at 100% width that will display correctly on both desktop & mobile will take a lot of custom CSS? Very doubtful.

I'm not a web developer, but i dabble, because I am forced to. I was hoping for a quick bit of generic code to get me started in the right direction....?

I'm just a humble screen printer trying to make money doing my job, i'm not a web developer, don't want to be.... I hope you guys take note of that fact for V8. None of us have time to sit here dorking around with website code. We need to be on the shop floor printing. Focus on a more user friendly, intuitive, UI for your clients and it will pay off ten-fold. We need the ability to easily customize our websites, without coding knowledge.

Please Log in or Create an account to join the conversation.

1 year 3 months ago #16515 by brenden
Hi,

I understand :) I was commenting honestly to your request of a banner that scrolled like the one you referenced on CustomInk. That requires Javascript.

DN8 is exactly as you described. It is an interface to make simple and complex changes to your site all within a back-end management tool. No coding needed, and full control over responsiveness. This is why it is such a big project because to achieve this is massive.

To make an image always be 100% you can simple use:

.banner {
width:100%;
}

That's assuming you mark you images with the class banner. i.e.:
<img src="banner.jpg" class="banner">

Cheers,

Senior Product Manager
Wilcom - Sydney, Australia



Please Log in or Create an account to join the conversation.

1 year 3 months ago #16530 by paradoxsc
Thank you!

How can I make it edge to edge? on my site it seems to have a fixed margin on either side constricting it.
www.paradoxprints.com

I'm using code mark-up you provided a loooooong time ago, you called it "semi-responsive theme".

Please Log in or Create an account to join the conversation.

1 year 3 months ago #16537 by brenden
Hi there,

With a little CSS magic you can so this.




Here is the CSS I used:
#home_index .c_wrapper {
    padding-top: 400px;
}

#home_index iframe {
    width: 100%;
    position: absolute;
    left: 0;
    margin-top: -400px;
}

One issue though - Your images in the banner is not wide enough so as you can see it's leaving gaps on the side.

So I did a little CSS hack to hide that image, but use the same image as a cover for your banner:

#globalDiv #image0 {
    display: none;
}

#globalDiv {
    background-image: url(//cdn.html5maker.com/50c8169e21b73cd937352462b345e97b58a5c95a583b3tkRaSgowqQdcjbQdZUp4.png);
    background-size: cover;
}

End result:



See how that goes :)

Cheers,

Senior Product Manager
Wilcom - Sydney, Australia



Attachments:

Please Log in or Create an account to join the conversation.

1 year 3 months ago - 1 year 3 months ago #16567 by paradoxsc
Thanks Brenden!

I have copied your code and can not get the same results,

Am I pasting the code in wrong?
Could it be because the files are hosted remotely?
I can just put up a static image if that is easier.

I created a larger image as well, 400x2500px. If this helps - www.paradoxprints.com/uploads/11294392/I...anners/banner-bg.png
Here is an image of the shirts that is static w/ transparent background as well - www.paradoxprints.com/uploads/11294392/I...anners/BANNER112.png

I appreciate all the help.


Attachments:

Please Log in or Create an account to join the conversation.

1 year 3 months ago #16573 by brenden
Ahh.. iframe... My mistake. You can't reference CSS changes within an iframe. I wonder though...

Could you use your HTML5maker to make a new banner that had NO background color and NO image? If you do this it will work.

I've changed your CSS to make the home page iframe contain the tile background image. So if you remake the banner and exclude the background image and color (transparent) then the background image of the iframe will show through.

Cheers,

Senior Product Manager
Wilcom - Sydney, Australia



Please Log in or Create an account to join the conversation.

Time to create page: 0.619 seconds
Powered by Kunena Forum

Latest from our blog

This Week in Catalog - May 18, 2018

This Week in Catalog - May 18, 2018 I have two big announcements to make in regards to the DecoNetwork catalogs. We read and listen to your complaints and suggestions. Recently, I...Read More

DecoNetwork 8 - Available Now!

DecoNetwork 8 - Available Now! After an incredible amount of work in design, development, and testing, DecoNetwork 8 is here! With version 8, we recommitted ourselves...Read More

This Week in Catalog: May 11, 2018

This Week in Catalog: May 11, 2018 Lately, we've been getting a lot of new products in each week. More than is typical. All those new products (mostly in the S&S Activewear...Read More

DecoNetwork 8 - Update 2 now available: SEO Improvements and more (+75 tasks implemented)

DecoNetwork 8 - Update 2 now available: SEO Improvements and more (+75  tasks implemented) DecoNetwork 8 was released just ten days ago, but we have already a second update (8.002) available for you with many improvements and fixes...Read More

This Week in Catalog: May 4, 2018

This Week in Catalog: May 4, 2018 Happy Star Wars Day to the fans out there. There was a lot going on this week with our official launch of Version 8. However, we did manage to...Read More