Search Results for 'page width'

[Michael]

Michael

#247867

Hi Ben

could you show me how to add a page id target to this css snippet:

.flex-control-nav, .flex-direction-nav {
display:none;
}

I’m using this shortcode on the page:

[gallery columns="1" size="full" type="slider" width="1600" height="900" ids="152,153,154,155,157,158,160,161,54401,161,54401,161,54401,161,54401,54401,54401,54401,54401" link="file" caption="default" masonry="default" transpeed="0" speed=1000]

it works, but want to loose the nav arrows and dots

[Kelly]

Kelly

#247808

I tried it and it still won’t go to the full width like my slider.

I wanted the grey background behind my bio to go full width.

https://hopskipphotography.com/

Could there be a setting somewhere else that is preventing it from working?

Again, this works on other pages. Just not on the home page.

Thanks!

• This reply was modified 6 years ago by Kelly.

[Michael]

Michael

#247797

Thanks very much Ben, this did the trick!
There is one additional change I’d like to make on the page: remove the search box & button that appears above the top-right corner of the forum index. I prefer to use the full-width search widget as shown. https://forum.eclipseaudio.com/ Is there some CSS that would enable me to remove the smaller search box, while retaining the larger one? The things I’ve tried so far remove ALL search boxes…

[Hannah]

Hannah

#247775

Hi Leon
Do you want this only for the shop page? This css maybe what you’re after:

.archive.woocommerce #content {
    width: 100%;
    max-width: none;
}

You can paste that into your custom css box in Theme Options > Advanced Settings.
Hope it helps!

Hannah

[Leon]

Leon

#247742

I’m using Woocommerce and have Virtue Premium.
I want to make the shop page display in full width without any empty space on the sides.
I have sidebars disabled.
I tried setting page template to full width, but it doesn’t seem to change anything. (yes, I cleared cache, too)

Here is the page I’m working on: *Login to see link

When I resize my browser, page will adjust, and full the empty space on the sides, but I would like this to also happen when maximized

[Leon]

Leon

#247742

I’m using Woocommerce and have Virtue Premium.
I want to make the shop page display in full width without any empty space on the sides.
I have sidebars disabled.
I tried setting page template to full width, but it doesn’t seem to change anything. (yes, I cleared cache, too)

Here is the page I’m working on: *Login to see link

When I resize my browser, page will adjust, and full the empty space on the sides, but I would like this to also happen when maximized

[Hannah]

Hannah

#247692

Hey Pascal,
I think the Photography demo from Ascend is a great option, though any of our themes can achieve this.
You can create a full width slider for your homepage by creating a Kadence Slider and enabling in from theme options. Then you can use the navigation menu to link to your portfolio page. Or you can add your portfolio posts to the homepage via the homepage layout manager or through a shortcode.
Let us know how we can help further!

Hannah

[Robert Jagger]

Robert Jagger

#247683

Hello

In my site I have followed the Ascend “Hoodie” home page design. By choice I set the Site Layout Max-Width to 940px with a header slider of 7 images (940px – 313px) above the 3 Image Menu Item widgets. The Shop / Cart / Checkout pages all work well with my 30+ test products covering 7 category/sub-categories. I am very happy with the PC layout.

Looking at the site on an iPad or iPhone the site functions correctly – BUT:

In the transition from the PC view -> Tablet View -> Cell Phone View, the white space padding below the slider increases to about 6 times the the PC spacing, for the Cell Phone view. The 7 slide “dot” link/indicators move progressively from within the slider images to well into the white space padding as the PC-> Tablet -> Cell transition.

How do I fix this?
Thanks, Rob

[Robert Jagger]

Robert Jagger

#247683

Hello

In my site I have followed the Ascend “Hoodie” home page design. By choice I set the Site Layout Max-Width to 940px with a header slider of 7 images (940px – 313px) above the 3 Image Menu Item widgets. The Shop / Cart / Checkout pages all work well with my 30+ test products covering 7 category/sub-categories. I am very happy with the PC layout.

Looking at the site on an iPad or iPhone the site functions correctly – BUT:

In the transition from the PC view -> Tablet View -> Cell Phone View, the white space padding below the slider increases to about 6 times the the PC spacing, for the Cell Phone view. The 7 slide “dot” link/indicators move progressively from within the slider images to well into the white space padding as the PC-> Tablet -> Cell transition.

How do I fix this?
Thanks, Rob

[Kelly]

Kelly

#247649

I’m trying to make a background block extend the full width of the page on my home page. I can get this to work on other pages, I have even copied the same exact settings from a normal page to the page content page and it doesn’t work.

I’ve looked through old tutorials where you can select full width on a page or even the home page. I’m not seeing that setting for my site.

Thanks for any help.

[Kelly]

Kelly

#247649

I’m trying to make a background block extend the full width of the page on my home page. I can get this to work on other pages, I have even copied the same exact settings from a normal page to the page content page and it doesn’t work.

I’ve looked through old tutorials where you can select full width on a page or even the home page. I’m not seeing that setting for my site.

Thanks for any help.

[Hannah]

Hannah

#247569

Hey Max,
The Row Layout block will span the entire width of the page. Just change the alignment to Full Width.

Hannah

[Max]

Max

#247521

I’m working on a landing page in Virtue. I’m using blocks. I’d like the page to have a header with a background that spans the entire page width, and the site logo inside of that, but no menu.

The closest I can get is using a Landing Page Template, and inserting a Row Layout Block, and putting my logo inside of it with a block within that block. But this doesn’t span the whole page.

Is there any way to do this with blocks?

I believe I may have been able to do this with the Site Origin editor, but I don’t see a way to convert the page to Site Origin at this point.

[Max]

Max

#247521

I’m working on a landing page in Virtue. I’m using blocks. I’d like the page to have a header with a background that spans the entire page width, and the site logo inside of that, but no menu.

The closest I can get is using a Landing Page Template, and inserting a Row Layout Block, and putting my logo inside of it with a block within that block. But this doesn’t span the whole page.

Is there any way to do this with blocks?

I believe I may have been able to do this with the Site Origin editor, but I don’t see a way to convert the page to Site Origin at this point.

[Hannah]

Hannah

#247482

Hey,
It looks liken you’ve set a max-width of 1280px. Are you setting that? You can adjust this from your post edit page under Post Options.
Hope that helps!

Hannah

[Ben Ritner]

Ben Ritner

#247381

Looks like you are hitting this issue: https://stackoverflow.com/questions/9983520/webkit-animation-is-leaving-junk-pixels-behind-on-the-screen

For performance reasons, WebKit only repaints those part of a page that it thinks might have changed. However, the iOS (pre-7) Safari implementation of border radius anti-aliases a few pixels beyond the calculated dimensions of a box. Since WebKit doesn’t know about these pixels, they don’t get redrawn; instead, they are left behind and build up on each animation frame.

Here is a workaround:

.portfolio-content .kt-has-2-columns .inner-column-1 .kt-inside-inner-col:after{
    content:'';
    width:100%;
    height: 1px;
    background: rgba(86,86,90,0.5);
    position: absolute;
    left: 0;
    bottom: -1px;
}
.portfolio-content .kt-has-2-columns .inner-column-1 .kt-inside-inner-col {
    position:relative;
    border-color:transparent;
}

Ben

[Constantin]

Constantin

#247314

Hi Hannah.
The maximum width of 456px is defined in the template (product-image.php), I attach a capture with the code.
I don’t use woocommerce extensions plugin.
I have disabled the plugins and it does not affect the image.
I also deleted the ches memory for refresh and no result.
We have also modified in- (theme options-Shop Settings-Product Image Sizes-Activate Appearance Report Product Image to Product Page
If it is stopped the image dimensions are set by woocommerce settings – Recommended width: for 468 pixels Single Image Product), when I change here the smaller image is made and the problem persists.
Thank you.

[Hannah]

Hannah

#247272

Hi Dmitry,
To position your side header in the middle try adding this to your custom css:

@media (min-width: 992px) {
.kad-relative-vertical-content {
    position: absolute;
    top: 20%;
}
}

I’m seeing your menu black on all your pages. Can you link to where it is white?

Hannah

[Ben Ritner]

Ben Ritner

#247054

This is a workaround with more browser support:

.page-id-1395 img.ascend-logo {
    display: none;
}

.page-id-1395 a.brand.logofont {
    width: 82px;
    background: url(https://taiyakinghungary.hu/wp-content/uploads/2020/03/logo-spajzfutar.png) no-repeat;
    background-size: contain;
    background-position: center;
}

Ben

[Susanne]

Susanne

#246893

Hi Hannah
This website frustrates me – I have done everything to make it work. Also, I have rebuilt the frontpage in Virtue – with and without blocks, still without the design I’m looking for.
The problem is still the 3 boxes and the text act as if they are not responsive.
I’m looking for the same responsive / flexibility as on the mobile setting. The size of the font is fine, but the gaps between the boxes are to big also below each box. I can fix it using the Mobile css styler with hight and width – but is that a good idea?
On tablet in horizontal position, it looks really good, the font is too big in the boxes, but that’s all.
However in vertical position, the boxes and rows are behaving strangely.
Do you think there is another way to make this work?
Best Susanne

[John]

John

#246890

Thanks for the reply Hannah,

My mobile for test is Xiaomi Mi Max 2 with latest Chrome.
Image of display attached.

The pertinent factor might be that it is Android 7.1.1.

My second test mob. is also a Xiaomi phone, RedMi 6, Android 8, same behaviour, Best Selling Products are 4 wide.

I can see the 4 wide moves to one wide on reducing the width on my pc.

Also, on both mobiles, the pages don’t totally load the first time, example, the slider action on a product page refuses to slide until the page is refreshed after 1st load (Virtue extras plugin).

Any thoughts? Thank you, John

[John]

John

#246726

This reply has been marked as private.

[SJNBham]

SJNBham

#246715

This reply has been marked as private.

[Ben Ritner]

Ben Ritner

#246697

maybe it didn’t reach you

Nope, that is not an email address to use, it’s for form notifications only. Please post logins here. 🙂

It appears the current news page is gone? I created a test page and didn’t have any issues using the masonry layout. Can you please recreate your current news page how you had it before?

Also please remove this this css from your child theme:

/* Mobile portrait (and larger)*/
.kt-post-grid-wrap[data-columns-ss="1"]>.kt-blocks-post-grid-item, .kt-post-grid-wrap[data-columns-ss="1"]>.kt-post-masonry-item {
    width: calc(100% - 30px) !important;
}

/* Tablet portrait (and larger)*/
@media (min-width: 768px) {
	.kt-post-grid-wrap[data-columns-sm="2"]>.kt-blocks-post-grid-item, .kt-post-grid-wrap[data-columns-sm="2"]>.kt-post-masonry-item {
    	width: calc(50% - 30px) !important;
       }
}

/* Tablet-landscape (and larger)*/
@media (min-width: 992px) {
    .kt-post-grid-wrap[data-columns-md="3"] > .kt-blocks-post-grid-item, .kt-post-grid-wrap[data-columns-md="3"] > .kt-post-masonry-item  {
    		width: calc(33.33% - 30px) !important;
	} 
}

Ben