Joomla Templates Club 406,261 posts

[puntje Friend puntjeJoin date: April 2014Posts: 239Downloads:29Uploads:119 Thanks: 48 Thanked: 4 times in 3 posts]

#664981

little images get big on portrait ipad, mobiele and small screens

What is the code to make it responsive in custom.css

It is good on the big screens computer and ipad large screen

So i do not have to give the width and height by some pictures

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

#665003

Hi
Use this code in the article to add above icon

<p><img src="/workshopjoomlaseo/images/headers/offcanvas.png" alt="" style=" max-width: 43px; max-height: 40px; "></p>

Hope it helps.

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

#746407

Hi
Use this code in the article to add above icon

<p><img src="/workshopjoomlaseo/images/headers/offcanvas.png" alt="" style=" max-width: 43px; max-height: 40px; "></p>

Hope it helps.

[puntje Friend puntjeJoin date: April 2014Posts: 239Downloads:29Uploads:119 Thanks: 48 Thanked: 4 times in 3 posts]

#665017

I want to put in the custom.css a code that all the small images, get small. Then it is responsive. Otherwise i must put in every images the are not large a code width and height in it.

for max-width screen the code is template.css:
@media screen and (max-width: 992px) {
.article-intro img,
.article-content img {
width: 100%;
margin-left: 0 !important;
margin-right: 0 !important;
}
}

This code does not work in custom.css. Is almost the same as above. The big pictures are responsive width this code, the little ones are not.

/*image article width */
.article-intro img, .article-content img {
max-width: 100%;
margin-left: 0 !important;
margin-right: 0 !important;
}

So all images that are less as 100% must get a width and a height. But is the screen smaller then it is not smaller on mobile. So all those images are not responsive. Only the larges ones, bigger as the screen are responsive.

[puntje Friend puntjeJoin date: April 2014Posts: 239Downloads:29Uploads:119 Thanks: 48 Thanked: 4 times in 3 posts]

#746421

I want to put in the custom.css a code that all the small images, get small. Then it is responsive. Otherwise i must put in every images the are not large a code width and height in it.

for max-width screen the code is template.css:
@media screen and (max-width: 992px) {
.article-intro img,
.article-content img {
width: 100%;
margin-left: 0 !important;
margin-right: 0 !important;
}
}

This code does not work in custom.css. Is almost the same as above. The big pictures are responsive width this code, the little ones are not.

/*image article width */
.article-intro img, .article-content img {
max-width: 100%;
margin-left: 0 !important;
margin-right: 0 !important;
}

So all images that are less as 100% must get a width and a height. But is the screen smaller then it is not smaller on mobile. So all those images are not responsive. Only the larges ones, bigger as the screen are responsive.

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

#665080

Hi
In responsive view 100% width of the image will auto resize as per the container width , if you will add code in custom.css it will effect the all other article images .
if you want to show the original image size in article content , add below code in custom.css

.article-intro img, .article-content img {
width:auto
}


Hope it help.

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

#746484

Hi
In responsive view 100% width of the image will auto resize as per the container width , if you will add code in custom.css it will effect the all other article images .
if you want to show the original image size in article content , add below code in custom.css

.article-intro img, .article-content img {
width:auto
}


Hope it help.

[puntje Friend puntjeJoin date: April 2014Posts: 239Downloads:29Uploads:119 Thanks: 48 Thanked: 4 times in 3 posts]

#665678

.article-intro img, .article-content img {
width:auto;
}

Does not work if pictures are larger. Then i get a scrollbar below.

[puntje Friend puntjeJoin date: April 2014Posts: 239Downloads:29Uploads:119 Thanks: 48 Thanked: 4 times in 3 posts]

#746662

.article-intro img, .article-content img {
width:auto;
}

Does not work if pictures are larger. Then i get a scrollbar below.

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

#665680

<em>@puntje 489189 wrote:</em><blockquote>.article-intro img, .article-content img {
width:auto;
}

Does not work if pictures are larger. Then i get a scrollbar below.</blockquote>
Hi
as i said if you will remove property of 100% width of image in this case it will use original size of the image , thats i said to define the width of the image in article in previous posts .

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

#746664

<em>@puntje 489189 wrote:</em><blockquote>.article-intro img, .article-content img {
width:auto;
}

Does not work if pictures are larger. Then i get a scrollbar below.</blockquote>
Hi
as i said if you will remove property of 100% width of image in this case it will use original size of the image , thats i said to define the width of the image in article in previous posts .

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#676131

<em>@puntje 488860 wrote:</em><blockquote>little images get big on portrait ipad, mobiele and small screens

What is the code to make it responsive in custom.css

It is good on the big screens computer and ipad large screen

So i do not have to give the width and height by some pictures

</blockquote>

You can use my solution below to change the small icon on mobile layout

Open templates/ja_sugite/css/custom.css file and add new rule

@media (max-width: 767px) {
.off-canvas-toggle {
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
}

.head-search #head-search {
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
}

.head-search #head-login {
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
}
}


[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#746776

<em>@puntje 488860 wrote:</em><blockquote>little images get big on portrait ipad, mobiele and small screens

What is the code to make it responsive in custom.css

It is good on the big screens computer and ipad large screen

So i do not have to give the width and height by some pictures

</blockquote>

You can use my solution below to change the small icon on mobile layout

Open templates/ja_sugite/css/custom.css file and add new rule

@media (max-width: 767px) {
.off-canvas-toggle {
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
}

.head-search #head-search {
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
}

.head-search #head-login {
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
}
}


[Author]

Posts