Joomla Templates Club 406,261 posts

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

#1012826

Hi
Both are different layouts and use a different style.
As in your screenshot, I assume you only want the image to be full width on site.
Or it’s something else kindly shares both the pages URL and add details what exactly you want to change in style. So that I can suggest you better.

Regards

1 user says Thank You to Pankaj Sharma for this useful post

1. zoohayr

[zoohayr Friend zoohayrJoin date: June 2016Posts: 100Downloads:24Uploads:46 Thanks: 36]

#1012842

Hi Pankaj

On the contrary, I would like the image to display in the same way as the style "featured articles". But under the menu "category blog" !

when i use "category blog" menu the image displays in all the width of the site.

thanks

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

#1012845

Hi
kindly shares both the pages URL

[zoohayr Friend zoohayrJoin date: June 2016Posts: 100Downloads:24Uploads:46 Thanks: 36]

#1012870

Sorry Penkaj !

Here is both of the page URL

enter link description here

This page displays the articles under the menu type "category blog"

enter link description here

and this page displays the articles under the menu type "featured articles"

What I would like is to display the articles under the menu type "category blog" but in the style of "featured articles" like second page.

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

#1012964

Hi Open template folder /css/custom.css file Create the file if its not present and add below code

@media (min-width: 768px){
.blog-featured .items-row.cols-1 .item-image {
    width: 100%!important;
}}

Hope it helps.

[zoohayr Friend zoohayrJoin date: June 2016Posts: 100Downloads:24Uploads:46 Thanks: 36]

#1013070

Hi penkaj,

By this code I think that you want to display the style of the menu of type "category blog" !!!

But what I’m looking for is the reverse. I would like to display the style of the menu of type "featured articles" in the menu of type "category blog". So when I display the articles under this menu "category blog" I can have small images with a intro text on the right of picture.

I have inserted the code but no think has changing ?

the page where I must have the change after inserting your code.

enter link description here

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

#1013073

Hi
Kindly add the code again

@media (min-width:768px){.blog-featured .items-row.cols-1 .item-image{width:100%!important}}

Your code is not correct. Please check.

[zoohayr Friend zoohayrJoin date: June 2016Posts: 100Downloads:24Uploads:46 Thanks: 36]

#1013081

Hi Penkaj,

It confirms what I said before ! your code has changed the style of the menu of type "featured articles" ?

What I’m looking for is the opposite. i would like to change the style of the menu of type "category blog" to "featured articles". So when I display the articles under this menu "category blog" I can have small images with a intro text on the right of picture.

Here is the page that you have changed with your code : enter link description here

[zoohayr Friend zoohayrJoin date: June 2016Posts: 100Downloads:24Uploads:46 Thanks: 36]

#1013083

Hi penkaj,

i will remove your code so that you can see the previous code.

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

#1013085

Hi
Use this code

@media (min-width:768px){
.blog .item .item-thumb {
    z-index: 3;
    width: 33.3%;
    float: left;
}
.blog .item-content {
    padding-top: 40px;
    padding-bottom: 100px;
    width: 66%;
    float: right;
}}

1 user says Thank You to Pankaj Sharma for this useful post

1. zoohayr

[zoohayr Friend zoohayrJoin date: June 2016Posts: 100Downloads:24Uploads:46 Thanks: 36]

#1013090

Hi penkaj,

This is exactly what I would like. thank you very much

I would not like to disturb you Penkaj, but I do not see how reducing full text to intro text. There’s a way to do it. Because the display is ugly with full text ?

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

#1013126

Hi
You can add readmore button in article to restrict the introtext.

[zoohayr Friend zoohayrJoin date: June 2016Posts: 100Downloads:24Uploads:46 Thanks: 36]

#1013325

Hi pankaj,

I found better to solve the problem of full text. I have changed the menu type to "movie list". It displays by default the intro text and that’s what I’m looking for. But I do not know how to change your code in relation to this type of menu ?

Here is the page to display by type menu "movie list" : enter link description here

Can you change your code in relation to this type of menu "movie list" ? thank you in advance Pankaj

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

#1013331

Hi

use this code

@media (min-width:768px){
.blog-movies .items-row article.image .item-content {width: 63.3%;
    float: right; }

.blog-movies .items-row .item div.item-image {   width: 33.3%;
    float: left;
}
}

1 user says Thank You to Pankaj Sharma for this useful post

1. zoohayr

[zoohayr Friend zoohayrJoin date: June 2016Posts: 100Downloads:24Uploads:46 Thanks: 36]

#1013337

Hi Pankaj,

That’s Exactly what i’am looking for. thank you so much Pankaj.

problem resolved 🙂

[Author]

Posts