Joomla Templates Club 406,261 posts

[supa Friend supaJoin date: September 2010Posts: 43Downloads:46Uploads:2 Thanks: 14 Thanked: 1 times in 1 posts]

#960937

I have a question about Hero Style 1. Is there a way to take off the auto size feature? I’m doing a build and want a much thinner Hero background image.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#960987

Hi
The bg image is also resized with property : background-size: auto 100%;
You can find it in acm/hero/tmpl/style-6.php
Here u can see this on front end > http://prntscr.com/c75as9

[supa Friend supaJoin date: September 2010Posts: 43Downloads:46Uploads:2 Thanks: 14 Thanked: 1 times in 1 posts]

#961128

Pankaj Sharma wrote:

Hi
The bg image is also resized with property : background-size: auto 100%;
You can find it in acm/hero/tmpl/style-6.php
Here u can see this on front end > http://prntscr.com/c75as9

I am using Hero style 1. Is the location the same?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#961270

Hi
in the responsive views image is auto resized by the template style so it will adjust in all type of views , if you will add a fix width it affect responsive view .
we used : 2560×1159 size pic in demo site
You can post a screenshot and site URL and let me know the issue you facing in re size i will take a look on it .

[supa Friend supaJoin date: September 2010Posts: 43Downloads:46Uploads:2 Thanks: 14 Thanked: 1 times in 1 posts]

#961540

Pankaj Sharma wrote:

Hi
in the responsive views image is auto resized by the template style so it will adjust in all type of views , if you will add a fix width it affect responsive view .
we used : 2560×1159 size pic in demo site
You can post a screenshot and site URL and let me know the issue you facing in re size i will take a look on it .

The width is fine. My client does not want a full screen of the pic on her pc. I was thinking of changing the height of the module if possible…

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#961550

Hi
You can post a screenshot and site URL and let me know the issue you facing in re size i will take a look on it .

[supa Friend supaJoin date: September 2010Posts: 43Downloads:46Uploads:2 Thanks: 14 Thanked: 1 times in 1 posts]

#961763

Pankaj Sharma wrote:

Hi
You can post a screenshot and site URL and let me know the issue you facing in re size i will take a look on it .

The current url is yourentattycom.ipower.com/main The client does not want a huge image filling up the screen. I think that perhaps keeping the width and maybe having half of the height (something like 2500×750) may work for them. I have attached a screenshot .

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#961792

Hi
The image is not big , its using 1000×665 .
Take a look here : http://prntscr.com/c8q3c1
If you want to apply a fix width add below code in custom.css file

@media screen and (min-width: 992px) {
#section-591 .acm-hero {
    max-width: 900px;
    margin: 0 auto;
} }

Add your desired width in 900px .

[supa Friend supaJoin date: September 2010Posts: 43Downloads:46Uploads:2 Thanks: 14 Thanked: 1 times in 1 posts]

#962132

Pankaj Sharma wrote:

Hi
The image is not big , its using 1000×665 .
Take a look here : http://prntscr.com/c8q3c1
If you want to apply a fix width add below code in custom.css file

<pre class="prettyprint linenums:1 prettyprinted">

1. <span class="lit">@media <span class="pln">screen <span class="kwd">and <span class="pln"> <span class="pun">(<span class="pln">min<span class="pun">-<span class="pln">width<span class="pun">: <span class="pln"> <span class="lit">992px<span class="pun">) <span class="pln"> <span class="pun">{
2. <span class="com">#section-591 .acm-hero {
3. <span class="pln">max<span class="pun">-<span class="pln">width<span class="pun">: <span class="pln"> <span class="lit">900px<span class="pun">;
4. <span class="pln">margin<span class="pun">: <span class="pln"> <span class="lit">0 <span class="pln"> <span class="kwd">auto<span class="pun">;
5. <span class="pun">} <span class="pln"> <span class="pun">}

Add your desired width in 900px .

I realize that those are the original dimensions, I guess what i want to know is, can I still have the image to automatically resize, only less width.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#962193

Hi
If you want to apply the width for all screen size use below code

#section-591 .acm-hero {
width: 900px!important;
    margin: 0 auto;
}

mak sure , now it will not resize create issue in responsive views .
Hope its clear now .

[supa Friend supaJoin date: September 2010Posts: 43Downloads:46Uploads:2 Thanks: 14 Thanked: 1 times in 1 posts]

#962759

Pankaj Sharma wrote:

Hi
If you want to apply the width for all screen size use below code

<pre class="prettyprint linenums:1 prettyprinted">

1. <span class="com">#section-591 .acm-hero {
2. <span class="pln">width<span class="pun">: <span class="pln"> <span class="lit">900px<span class="pun">!<span class="pln">important<span class="pun">;
3. <span class="pln">margin<span class="pun">: <span class="pln"> <span class="lit">0 <span class="pln"> <span class="kwd">auto<span class="pun">;
4. <span class="pun">}

mak sure , now it will not resize create issue in responsive views .
Hope its clear now .

I don’t know if i understand. You stated that the size of the demo image is 2560×1159. Why can’t the size be changed to say, 1800×750(made up random numbers) and the image still resizes in all responsive views. the issue I have is, I want the width to full…..but the height I need to be much thinner. Should there not be a place where i can just change the image display dimensions?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#962856

Hi
please note the code is

#section-591 .acm-hero {
width: 900px!important;
    margin: 0 auto;
}

Becuase the template is responsive the image will resize according to the parent container width and height . Its normal and i can change the behaviour . If you would like to add a min. width for it 
use the first code i provided . and if you want to define a fix width use above code in this post .
If you want to apply a fix height also use this code 

section-591 .acm-hero {

height: 500px!important;
margin: 0 auto;
}

change the value as per needs .
Hope its clear now .

[Author]

Posts