Search Results for 'COLUMNS'

[Jérémie]

Jérémie

#34895

Hello,

I would like to have the following layout:

column1 column2
text text
text column a column b
text text text

I tried to insert span6 in the second column but it does not work.
any idea?
thanks

[Jérémie]

Jérémie

#34895

Hello,

I would like to have the following layout:

column1 column2
text text
text column a column b
text text text

I tried to insert span6 in the second column but it does not work.
any idea?
thanks

[Mads]

Mads

#34872

I have done like this, but the problem is still there.

[columns]
[span8]
<img class="alignright wp-image-1438 size-medium" src="http://www.vesterbrospejderne.dk/wp-content/uploads/2015/03/P1030805_RED-300x225.jpg" alt="" width="300" height="225" /><h4>En spejdergruppe på Stenbroen</h4>
...
[/span8][span4]
<h4>Nyvalgt grupperåd slår rekord</h4>
...
[/span4]
[/columns]

[Mads]

Mads

#34865

Oohh, one more thing. As you can see on our frontpage, the titles aren’t horizontally aligned.

This is the two first columns on the frontpage:

[columns]
[span8]
<img class="alignright wp-image-1438 size-medium" src="http://www.vesterbrospejderne.dk/wp-content/uploads/2015/03/P1030805_RED-300x225.jpg" alt="" width="300" height="225" />
<h4>En spejdergruppe på Stenbroen</h4>
---
[/span8][span4]
<h4>Nyvalgt grupperåd slår rekord</h4>
...
[/span4]
[/columns]

Apparently the image in the left column makes the h4 header appear a bit lower than the header in the right column, where there isn’t an image.

How can we fix that?

[Ben Ritner]

Ben Ritner

#34837

Hey,
you can make a four column blog posts layout using this shortcode:

[blog_grid columns="4" items="4"]

Just add in your page content.

If your using the home page as your posts page then you can make the blog posts 4 columns in the theme options > home layout. Just scroll to the bottom.

Ben

[Ben Ritner]

Ben Ritner

#34798

Hey,

I think you might be misunderstanding how google page speed works and what it’s for. See: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.amazon.com%2F

Google page speed is not what is going to be used in the search algorithm. It’s a tool, it’s helpful as a tool to show how your site is being rendered. Its not an end all for what is the best and it doesn’t take into account retina screens.

Amazon loads a completely different mobile site. optimized just for mobile. There site is not a responsive site that does both, which is what this theme is. And it’s score is similar to yours. They aren’t worried, and for you, images are not your biggest mobile issue.

First lets talk resolution. Google mobile insight doesn’t view it as if you were on a retina screen. Considering most phones are, Iphone in particular it’s wrongly showing that your image size is way too big. It’s not, in fact iphone6 (not the plus that is even larger) has a screen pixel resolution of 750×1334

Google checks your site at 320px wide. Less then half the size of the current most popular phone size (in US).

As for your layout. One way to make google page speed happy (if that is what your going for, I recommend you reconsider though) is to make your images in your post a gallery. Three or four columns. Then you are asking the viewer to click on the image and view the lightbox (full) version. Then on mobile your columns become one and you are loading smaller images. This in general will keep your whole page size down dramatically.

Other options for your post layout is to consider a mobile theme plugin which would create a completely separate page for mobile.

Or you can use one of the experimental methods to change images sizes based on the screen like we talked about before with just remember to take retina into account.

The biggest thing is results are what matter, how fast is your site loading. Not page insight tests. I really recommend you focus on making your site faster by making choices about server, CDN, caching (w3 total cache is better then super cache in my opinion) and overall how your displaying your content. Your using a responsive theme which means you need to be thinking about mobile when you create pages. Do some things like limiting how many large images you are going to place on a page. maybe you add 2 and then a gallery grid. Etc

Ben

[Ben Ritner]

Ben Ritner

#34781

Hey Artur,

What images are you seeing that are being displayed super large? In all the places like portfolio grid, carousel. Images are sized to what makes sense for both desktop and mobile. For example on mobile you have 1 column with the image at 270px. where on desktop you have 4 columns and the image is still 270px.

Since the theme already crops and resizes images you shouldn’t have any huge speed lost do to image loading.

Also on most every mobile device you want to load images with 2 the pixel count. Since they are HD or retina screens. In a lot of cases that means loading larger images then what you load on desktop. Retina plugin comes in for support for that.

If you see a specific problem I can talk your through ways to change images based on mobile but in general this isn’t an issue with this theme and the structure. For the most part you are better off focusing on the overall speed of your site by using caching and minify and if you want to improve the speed of your images start with a CDN which will give more improvement then shaving 10% off the image size for certain screens. You want support desktop and not just mobile with your site.

Finally. If this is a large concern for you and the specifics of your site and you want to load a completely separate site for mobile that is optimized just for mobile I would recommend you use a mobile theme plugin. Jetpack has one that is free.

Ben

[Ben Ritner]

Ben Ritner

#34636

So you want all 5 columns for tablet size similar to desktop?

@media (min-width: 767px) {
.footercol1 {
width: 80%
}
.footercol2 {
width: 20%
}
}

Ben

[Nicola Crossley]

Nicola Crossley

#34602

Thanks Hannah that worked a treat!
I ended up changing it to:

@media (min-width: 900px) {
.footercol1 {
width: 80%
}
.footercol2 {
width: 20%
}
}

As visually it’s more what the client wants – so this actually makes it look like a 5 column footer (1st column using vis editor and 4 columns within text editor, then 2nd column just vis editor with text!)

Woohoo – thanks so much.

Question -not urgent but I know my boss is going to ask me – when it’s a smaller screen size than a desktop it goes straight to all columns in a line one after another – is there a way to make them reduce at first – so still being next to each other but smaller say in Tab size, then when it gets to smart phone size to have in long line?

Nic
x

[Ben Ritner]

Ben Ritner

#34588

Hey,
Easiest quick fix is to add the home widget area instead of the portfolio full.

then in the widget area add a text widget with this shortcode:

[portfolio_posts columns="4" items="12" order="DESC" orderby="date"]

All goes well with testing I should have the update out tomorrow.

Ben

[Nicola Crossley]

Nicola Crossley

#34556

Hello,

I was hoping you could help me change the size of the footer. Basically I would like 3 -column footer but with the first column larger than the other two – is there a way I can do this via CSS?
here is an example:
*Login to see link

As you can see on this site – they have Footer column 1 taking up approx half of the width, then footer columns 2 and 3 taking up the other half….is that possible with this theme?

many thanks in advance -you guys have never steered me wrong in the past so i am crossing my fingers!

Nic

[Nicola Crossley]

Nicola Crossley

#34556

Hello,

I was hoping you could help me change the size of the footer. Basically I would like 3 -column footer but with the first column larger than the other two – is there a way I can do this via CSS?
here is an example:
*Login to see link

As you can see on this site – they have Footer column 1 taking up approx half of the width, then footer columns 2 and 3 taking up the other half….is that possible with this theme?

many thanks in advance -you guys have never steered me wrong in the past so i am crossing my fingers!

Nic

[Jiri]

Jiri

#34404

Hi Hannah and Ben,
although I am friendly with Virtue Free, I am little bit lost in Premium version…

I need to make just ONE page with:
1) sticky header – done
2) fullwidht/fullheight slider – done
3) portfolio grid with 4 columns and captions permanetly displayed – doesn’t work. I switched template to Portfilo grid but it doesn’t work. I tryed to use page builder, but the grid appear different, images are small.
4) some text below portfolio grid – I don’t know how to do it

On contact page I need to make own template like “fullwidth feature”. And paste contact below feature image.
I have same trouble with feature image. Once I tryed set feature image, it worked. But I tryed to switch page template and when I switched back to Feature, the imge is not loading, there is only frame with the title.

And one small simple feature. Is possible redefine portfilo item defaul settings? Because there is many parameters and we must set every item as the first one.

I tryed everything many hours, but nothing works.
Link on test page: http://www.jakubhozman.cz

[Jiri]

Jiri

#34404

Hi Hannah and Ben,
although I am friendly with Virtue Free, I am little bit lost in Premium version…

I need to make just ONE page with:
1) sticky header – done
2) fullwidht/fullheight slider – done
3) portfolio grid with 4 columns and captions permanetly displayed – doesn’t work. I switched template to Portfilo grid but it doesn’t work. I tryed to use page builder, but the grid appear different, images are small.
4) some text below portfolio grid – I don’t know how to do it

On contact page I need to make own template like “fullwidth feature”. And paste contact below feature image.
I have same trouble with feature image. Once I tryed set feature image, it worked. But I tryed to switch page template and when I switched back to Feature, the imge is not loading, there is only frame with the title.

And one small simple feature. Is possible redefine portfilo item defaul settings? Because there is many parameters and we must set every item as the first one.

I tryed everything many hours, but nothing works.
Link on test page: http://www.jakubhozman.cz

[Bjarne]

Bjarne

#34138

Hi!

I’d like to create a blog post, but instead of having the gallery in the header, I’d like a two column body area, with text on one side, sliding gallery on the other – very much like the portfolio 40% content type. I’m somewhat able to achieve that, adding columns and a gallery to one column, but the gallery is shown as a grid. Is there any way, to make the gallery show like a slider?

Hope that makes sense, otherwise I’ll make an example and post a link.

Best regards
Bjarne

[Bjarne]

Bjarne

#34138

Hi!

I’d like to create a blog post, but instead of having the gallery in the header, I’d like a two column body area, with text on one side, sliding gallery on the other – very much like the portfolio 40% content type. I’m somewhat able to achieve that, adding columns and a gallery to one column, but the gallery is shown as a grid. Is there any way, to make the gallery show like a slider?

Hope that makes sense, otherwise I’ll make an example and post a link.

Best regards
Bjarne

[Ben Ritner]

Ben Ritner

#34136

Felipe, Can you post a link? What have you set the columns to for your shop pages?

In the theme options > shop settings do you have the theme crop on or off?

Ben

[Patrick]

Patrick

#34132

Hi, I have tryed to do 3 Simple Boxes as seen in the “Shortcodes” page in the demo example, but can’t make it run thru the whole width of the page and they are separated.

What I’ve done:

Add New Row
Set Row Layout: 3
Columns with Ration: Even
Left to Right

Then I select one of the row and click on “+Add Widget” and choose “Visual Editor”. I’ve tryed to copy and paste the exact code as seen in the “Shortcodes” or by clicking on “Pinnacle Shortcodes/Simple Box”.

[Patrick]

Patrick

#34132

Hi, I have tryed to do 3 Simple Boxes as seen in the “Shortcodes” page in the demo example, but can’t make it run thru the whole width of the page and they are separated.

What I’ve done:

Add New Row
Set Row Layout: 3
Columns with Ration: Even
Left to Right

Then I select one of the row and click on “+Add Widget” and choose “Visual Editor”. I’ve tryed to copy and paste the exact code as seen in the “Shortcodes” or by clicking on “Pinnacle Shortcodes/Simple Box”.

[Hannah]

Hannah

#34130

Hey, you can actually do this by using a shortcode. Try using this:
[portfolio_posts columns="6" items="24"]
Just paste it into the visual editor of a page and set the page template to full width.
Hope that helps!
Hannah

[Stephen]

Stephen

#34008

Hi there,

I’ve just noticed that when I deactivate Woocommerce on my site, it breaks the layout of the homepage.

The effected areas seem to be:

The slideshow, (Kadence Slider) – it just hangs on the loading icons.

Testimonials Slider Widget – Each testimonial is stacked one on top of the next.

The Footer – This had 4 columns, each with a widget in but the whole area has disappeared.

When I reactivate Woocommerce, the correct layout is restored.

The theme and all plugins are up to date.

Do you have any ideas about what’s causing this and how to fix it please?

I’ve checked a couple of our websites and the same issue occurs on both when deactivating Woocommerce.

Thanks in advance,

Steve

[Stephen]

Stephen

#34008

Hi there,

I’ve just noticed that when I deactivate Woocommerce on my site, it breaks the layout of the homepage.

The effected areas seem to be:

The slideshow, (Kadence Slider) – it just hangs on the loading icons.

Testimonials Slider Widget – Each testimonial is stacked one on top of the next.

The Footer – This had 4 columns, each with a widget in but the whole area has disappeared.

When I reactivate Woocommerce, the correct layout is restored.

The theme and all plugins are up to date.

Do you have any ideas about what’s causing this and how to fix it please?

I’ve checked a couple of our websites and the same issue occurs on both when deactivating Woocommerce.

Thanks in advance,

Steve

[Ben Ritner]

Ben Ritner

#33847

It’s not a css thing, the images are just cropped too small becuase they are set for a max width of 1140.

Just go into the page, click on the text tab and where you see the [gallery] shortcode with your image ids. add this:

imgwidth="360"

so the gallery shortcode would look something like:

[gallery ids="ALLYOURIDS" imgwidth="360" columns="5"]

Ben

[Steffen]

Steffen

#33838

Dear Ben and Hannah,

first of all, thanks for the great Theme, so far it gave best solutions for everything I wanted to implement!

Now I want to expand the size of my website to “fullscreen” or actually 90%.

I achieve this with
.container {
width: 90% !important
}
.row {
width: 1170px;
margin: 0 auto !important
}
.page-id-890 .row{
width: 100%
}
.page-header {
width: 1170px;
margin: 0 auto !important
}
.page-id-890 .page-header {
width: 100%
}

However, this does not influence masonry/isotope as you can see here: *Login to see link
It seems to be fixed at the original size of 935/940px even though the parent container is.. well 90%. When shrinking down window-size the masonry adapts, the images get smaller and everything seems to stay proportional. Now this is not the behaviour I expected from masonry. I would expect that masonry responds by de/increasing number of columns, rearranging images and yeah, resizing them. Even though I specified 4 columns, masonry doesn’t seem to use them, neither is the phenomenon due to too small images, they are each between 666-1000px wide.

Could you help me find a way to get a masonry/isotope grid over the whole 90%?

Thanks in advance!
Steffen

[Steffen]

Steffen

#33838

Dear Ben and Hannah,

first of all, thanks for the great Theme, so far it gave best solutions for everything I wanted to implement!

Now I want to expand the size of my website to “fullscreen” or actually 90%.

I achieve this with
.container {
width: 90% !important
}
.row {
width: 1170px;
margin: 0 auto !important
}
.page-id-890 .row{
width: 100%
}
.page-header {
width: 1170px;
margin: 0 auto !important
}
.page-id-890 .page-header {
width: 100%
}

However, this does not influence masonry/isotope as you can see here: *Login to see link
It seems to be fixed at the original size of 935/940px even though the parent container is.. well 90%. When shrinking down window-size the masonry adapts, the images get smaller and everything seems to stay proportional. Now this is not the behaviour I expected from masonry. I would expect that masonry responds by de/increasing number of columns, rearranging images and yeah, resizing them. Even though I specified 4 columns, masonry doesn’t seem to use them, neither is the phenomenon due to too small images, they are each between 666-1000px wide.

Could you help me find a way to get a masonry/isotope grid over the whole 90%?

Thanks in advance!
Steffen

[Ben Ritner]

Ben Ritner

#33707

My previous theme resized the images and cut the images when needed (hard crop)

Yes this theme does the same as long as your images are large enough to be cropped, if they aren’t then the script can’t grow your images.

I set the slider max height at 150 and max width at 600

That setting is for the flex slider not the latest posts carousel you are using. it as now bearing on what you have. the carousel resizes to make sure your images are large enough for the columns you have for all screen sizes. If you just want a slider with small images in the middle of hte page you can use the slider option and not the carousel.

where can I find the size of all of my featured images?

This is a smart theme, it doesn’t just have one size, it sizes the images based on whatever options you are using and where you are adding the image. Plus in every post you can set custom sizes for your featured images. There is not a one size answer. And in general if you upload nice pretty large images everything is cropped automatically and you don’t have to worry about resizing or customizing anything.

[Ben Ritner]

Ben Ritner

#33692

Hey,
The images in the top slider would auto resize if they were large enough images. but they aren’t They need to be at least 700px wide and 518px tall for the carousel your using. If you set the carousel to have more columns then you can have smaller images. But an image like this for example isn’t at least 700px wide: http://www.brigittedam.nl/wp-content/uploads/2014/10/de-test.jpg

As for in the posts content almost none of your images are at least 1140px wide to fill the space. What are you thinking with those?

Ben