Public Forums 71,145 posts

[fuzmic Friend fuzmicJoin date: September 2013Posts: 16Downloads:0Uploads:1]

#201474

Hi friends

In T3 b3 blank template, the responsive layout caters for 4 sizes. In the large size of 1260px, an image 1260px by 120px on the header will fit nice. Once we reduce page size to the smaller layout the image appears in unexpected way.

How can I stop using this image if user use a smaller page size? The image is placed from the Custom.css using .t3-header {background-image: url(“../images/pic1260-120.jpg”);} or better still how to have different jpg for different size?

One more question: What will be the best one size to fit all eg will 600×80 does it.

[fuzmic Friend fuzmicJoin date: September 2013Posts: 16Downloads:0Uploads:1]

#550291

Hi guys

Using max-width: 100%, instead of width: 100% does not work.
So let me rephrase my question

As we can see in the “small” responsive layout, the “mainnav” stops display taken over by the offset-canvas side bar. If we apply this, logically speaking, we can just turn off the image at the .header. I can’t find the spot to do this. Please help.

[scannergmbh Friend scannergmbhJoin date: September 2012Posts: 28Downloads:22Uploads:11 Thanked: 4 times in 1 posts]

#550350

hi,

http://adaptive-images.com/

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#550372

Hi @fuzmic,

Please note that we only cover general questions or bug reports in public box. In addition, you must be a licensed member in order to request assistance in technical matter.

[fuzmic Friend fuzmicJoin date: September 2013Posts: 16Downloads:0Uploads:1]

#550456

Adam and S.gmbh – thanks.

I think i will go into bootstrap responsive.utilities way.

Meanwhile unsure how our german friend pointer leads to, care to clarify a bit.

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#550554

This is probably not exactly the code, but should give you an idea. When I’m using the Bootstrap 3 version of the template, I add something like this to the bottom of my custom.css

@media (max-width: 768px) {
header#t3-header {
background: #330000 none;
}
}


This would say to make the header have a background color of a medium red with no image for the T3 Header section when the resolution is 768px or less.

Does this help?

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[fuzmic Friend fuzmicJoin date: September 2013Posts: 16Downloads:0Uploads:1]

#550617

Scott your great simple addition to my favorite Custom.css WORK. I modified it slightly to play around. THANK YOU.:-*

@media (max-width: 1160px) { /* when width less than 1160 from 1260 */
.t3-header {
background-image: linear-gradient(to bottom,#ffffff,#99ff66) /* a linear-gradient image */
}}

[Author]

Posts