Store Community Support Documentation
Kirk

This is more of a question than an issue. I have a theme that I want to use but the only problem I'm having is that individual photos (photo.view) is confining the photo to the center column even when there is nothing in either the left or right columns. The material theme displays the photo the full width of the page, which is what I'd like to have happen in this other template. I've tried moving the photo to a different block, one that is full width, and although block 11 doesn't look terrible, it does push all photo info underneath the photo itself. Block 12, the other full width block, doesn't work at all.

I don't suppose it's an easy fix to make Block 7, the default position for the photo, go the entire width of the page, ignoring the left and right columns?

If it works in one theme, and not another, it most likely is a CSS issue and not the block (unless of course you have custom template files in your theme too). You may need to find the image width in your theme's CSS file and update it to width:100%;

For example, in the Material template it is in the CSS file: PF.Site/flavors/material/flavor/bootstrap.css

at line: 62253 you will see:

#page_photo_view .photos_view .image_load_holder img {

    max-width: 100%;
}

That is the part that makes the image fill the entire width of the image holder. If yours is already set to 100%, then the width of the image holder may have it's own CSS rule.

 

Last update on June 8, 9:32 pm by Nativedragon11.
Kirk
#2

Thank you, Nativedragon11, for the reply. :)

It looks like in this particular theme the image width is controlled by the center column width which is 50% (the left and right columns are then 25% width each). And those CSS rules are used throughout the theme. So when I change the width to 100% for the photo.view it changes the center column width on all pages too 100% which shoots everything all over hell and gone. LOL.

I don't hate the Material theme. I guess maybe it will just be easier to stick with it. At least until I find a different theme that I like with full width photo views.

I appreciate the help, though!!

Last update on June 8, 10:02 pm by Kirk.
Kirk
#3

The saga continues. :)

I'm trying to modify the bootstrap.css file to change the necessary rules for the one page only. The page id, as far as I can tell, is "page_photo_view" so I've added the following to the top of the bootstrap.css file:

===================

#page_photo_view  #content {

@media (min-width: 992px)
.col-md-3 {
    width: 0;
}
}
#page_photo_view  #content {
@media (min-width: 992px)
.col-md-6 {
    width: 100%;
}
}

==================

The first rule changes the side columns from 25% to 0%. The second rule changes the middle column from 50% to 100%.

But I think I'm messing up the syntax. Can anyone give me a hand with that?

Last update on June 10, 7:54 pm by Kirk.
JohnJr
#4

not sure on column but with regular css you have the media first

@media screen and (max-width: 991px) {

your css

}

Here is an example of something I did:

@media screen and (max-width: 991px) {

  #ynAdvMenuSystem .ynmenu-listing li[data-level='1'] {
border-bottom: 1px solid #7e7e7e;
  }
}

 

 

Kirk
#5

I just noticed that I didn't include the percent sign in the first rule (0%). But it still didn't work. Nor did your suggestion.

I may not have the page id correct. I'm going to continuing poking around with this. Surely it isn't that difficult to replace a CSS rule on one page.

I did see a suggestion online where I could use an if else statement at the top of each page to load one of 2 different css files depending on which page is being loaded. I might try that, but it seems like there should be an easier solution.

Last update on June 11, 12:41 am by Kirk.
JohnJr
#6

I looked that up, and that is for the entire page or the thumbnail row on the bottom - page_photo_view

Which page are you trying to apply that?  Actually, it should be used to a specific id, but I think you are thinking if you do the CSS on the entire specific page it will not affect the id in other places?

The page id looks correct. And you don't need a % after a zero so, assuming both classes .col-md-3 and .col-md-6 are for divs inside a larger div with the id #content, and you only want them to be a specific size if the screen is larger than 992px, then your CSS would actually be something like:

@media (min-width: 992px) {
#page_photo_view#content .col-md-3 {   

width: 0;
}
#page_photo_view#content .col-md-6 {
width: 100%;
}
}

Best of luck. Also be mindful if there is an autoload.css file in your theme with any similar settings, as those will take priority.

 

Last update on June 11, 6:16 am by Nativedragon11.
Kirk
#8

So I started off this search with bad information. It was not a Page ID I was dealing with, it was a Body ID. I'm so sorry. :(

It turns out that the following did the trick -- to modify the CSS only on the photo view page.

============================

  body#page_photo_view .col-md-3 {
    width: 0%;
  }
============================

AND

============================

  body#page_photo_view .col-md-6 {
    width: 100%;
  }
============================

I haven't tested much to make sure it didn't mess up any other pages, but I'm pretty sure I'm OK.

Thanks so much for your help you guys. You pointed me in the right direction.

Last update on June 12, 9:23 pm by Kirk.
JohnJr
#9

Glad you got it to work...I thought it looked odd.

 

JohnJr
#10

Glad you got it to work...I thought it looked odd.

 

Nicely done! Happy you got it resolved!

Scheinwelt-Media
#12

if using a bootstrap based theme this should work to make the page 100% width:

(use space between the two ids because the formatter of this forum deletes the space)

#page_photo_view(space)#main .container-fluid {
max-width: 100%;
}
Last update on June 13, 7:32 pm by Scheinwelt-Media.