Change the number of column in smaller browser's view « Support Forum | Kriesi.at

Support Forum » Angular

Change the number of column in smaller browser's view

6 posts from 3 voices

Started 10 months ago by Gizz13
Latest reply from Devin
This topic is not resolved

Tags:

Gizz13
Member

Hello!

First let me start by saying that I love the theme! It looks amazing, and the user interface is wonderful. I've bought a few premium themes before this one, and this is by far the best.

Now, I'd like to know if it's possible to tweak something in the theme:
I use the 4 column portfolio on a few pages, and while the theme is perfectly responsive, I was wondering if there was an easy way to have it resize to two columns instead of one, when it is in a smaller browser (phone). I will have quite a lot of items, and I'm worried that the page will be endless to scroll through.

Also, is there any way to have a portfolio item not screw up the design when the title is too long? I have an entry that spreads over two lines, and it moves the image down, and it's not aligned with the rest of the elements.

Thanks for your help!

Julien

Posted 10 months ago #
Gizz13
Member

I also have a problem on my home page. I have three portfolio widgets for different categories, and when I click on an item of the 2nd or third portfolio, the page moves back to the top, where the item would appear if it was on the first porfolio.

Have a look at: http://new.chichignoud.com/
If you click on the item in the "showreels" section, you'll see what I mean. It's quite annoying on mobile browsers, because there is a lot to scroll through to find where the item appeared.

If there was a way to fix that, it would be awesome. Thank you!

Julien

Posted 10 months ago #
Gizz13
Member

And sorry, another question while I'm at it:

Is there any way to have the portfolio items text appear under the images instead of next to it? For example, I'd like to have the attributes list next to the image, and the actual content underneath. I use the theme as a video portfolio, so my images are more wide than they are high.

Thanks again,

Julien

Posted 10 months ago #

Ismael
Moderator

Hi,

I think a workaround is to open the portfolio entries on single portfolio view instead of using AJAX option. To put the portfolio title below the image, open up includes > loop-portfolio.php and find this code.

echo "<h1 class='post-title portfolio-title'>";
					echo "<span class='primary-background title-span'></span>";
					echo "<a href='".get_permalink()."' rel='bookmark' title='".__('Permanent Link:','avia_framework')." ".get_the_title()."'>".get_the_title()."</a>";
					echo "</h1>";

Place the above snippet below this code

$forceSmall = true;
					$slider = new avia_slideshow(get_the_ID());
					$slider -> setImageSize($image_size);
					if(!empty($avia_config['portfolio_ajax'])) $slider -> set_links(get_permalink());

					echo $slider->display($forceSmall);

Now, to change the column layout. Open up css > grid.css and look for #Mobile (Portrait) section.

Regards,
Ismael

Posted 10 months ago #

Gizz13
Member

Thanks for your reply.

About the text appearing under the image, I was actually referring to the actual portfolio item text, once open. I'd like, if possible, for the text of the "post" to show up underneath the image, instead of next to it, because I have a fair bit of text to post in, and it's squeezed into the column with the title and the attributes right now.

For example: http://new.chichignoud.com/portfolio/cycles/
I'd like the text "Andrew thinks he has relationships figured out. etc..." to go under the image, and taking the whole width of the page, instead of staying in the same column as the title and the credits.

As for the grid.css I don't really get what is happening there, and I'd rather not touch it without knowing what I'm doing. But I can live without that tweak.

As for the workaround solution, I prefer the AJAX version of the portfolio, so I guess I'll just change my layout to accomodate for this bug if there is no solution...

Thanks for your help!

Julien

Posted 10 months ago #
Devin
Moderator

Hi Julien,

Moving the content of the post below the portfolio is a bit drawn out process and I can't really give an exact step by step set of directions for it unfortunately.

If you are interested in making the customization, you would need to open includes>helper_templates.php and search for:
echo "<div class='inner_slide'>";

This is the start of the layout for the ajax created portfolio. Much of what you want can be done with just re-ordering where the content is called but the issue will be with making sure everything continues to work cross browser etc.

For instance, just removing the "two_third first" for the div right under inner_slide will make the slideshow the entire width of the portfolio area and push the content below it. Then you would remove one_third from the portfolio-entry div so that is as wide as the container as well.

If you aren't comfortable with making the css changes yourself, I'd recommend looking into a freelance web developer. I would guess it would only be a few hours of work to get everything customized for the portfolio layout exactly as you want it.

Regards,

Devin

Posted 10 months ago #