- This topic has 6 replies, 2 voices, and was last updated 5 months ago by
.
Hello,
I would like to bring to your attention that several Zoo templates are out of date in the current version of Woo and Jevelin. See attached.
May I request that the Woo templates be updated in the next update release of the theme?
Alternatively, could you provide documentation on how to carry out this task individually?
Many thanks in advance.
George
Hi there,
Please try our latest beta version that should fix this issue:
Let us know if that works! 🙂
Best regards,
Shufflehound team
Hello,
sorry for the delay. I have now updated the theme.
I have good news and bad news.
The good news is, that the theme updated the previously outdated templates.
The bad news is, that the goalposts have since moved, and since the latest WooComemrce update, now two new templates are also outdated. See the attached screenshot.
On a separate matter, may I ask where in the theme, or how (with CSS or another means) the Mobile layout margins (left+right) of the Theme can be modified globally? I’ve spent considerable time trying to establish how to achieve this, but all CSS customisation appears to apply at the individual container level (e.g. header, body, etc), not globally for all objects in the Mobile layout. My objective is ti trim the current margins, to maximise usable screen space for text and images (e.g. remove useless white space side to side from 30px to 5px). Any pointers in this area would be appreciated. thanks in advance.
Regards
Hello, on further investigation of my layout concerns, it looks like the theme’s responsive.css and bootsrap.css files are acting on the layout for the following elements:
margin-left: auto;
margin-right: auto;
These elements are reactive to another element(s) which defines the screen width:
max-width: xxxxpx;
min-width: xxxxpx;
Depending on the screen width, the margin is calculated at some ratio automatically, but it’s unclear where this variable is defined. It is the ratio I wish to modify so the change applies site-wide (including the header menu/content and footer content) across all responsive layouts, excluding only the desktop view.
Attached are a couple of screenshots narrowing down the effect and elements responsible for it within the content-container (.container).
Any advise on this would be welcome.
Kind regards
Hello,
Oh, WooCommerce too frequently updates its files, often only changing the version number. We will add this to our to-do list to address the issue.
Regarding the layout, it is controlled by the container class, which uses margin and max-width attributes to adjust page width. If necessary, we can create custom CSS to override these settings. Just let us know for which devices what exact margin changes you want to make.
Best regards,
Shufflehound Team
Hi,
thanks for the feedback.
” it is controlled by the container class, which uses margin and max-width attributes to adjust page width”
Can you explain the logic/thinking behind this approach? It works well for some screens, but for others, it squashes all the content in the centre, leaving massive white space on either side. Most visible on mobile devices. I can understand if this is a mechanism to keep content centred in the body section of the page, but don’t understand why it applies to the header and footer as well. I have attached screenshots of an extremely bad case example and a good out-of-the-box example, granted that they are not both tablets or mobile.
I hope to utilise the white space better and stretch all the content while leaving minimal side-to-side white space on mobile devices. Then if any content within a page is offset left or right, I’m hoping to mitigate by centring that container/column and to re-centre the content that cannot be stretched, like woo new products on the front page for example.
I would greatly appreciate the help. I’m willing to pay a 1-time fee for your time to create the custom CSS for me. I would like to achieve as follows:
For all mobile screens including tablets I would like to stretch the content to reduce the white space from side to side, this includes the header (logo and menus) and the footer content as well as the body content throughout. The specific values I think may work towards my vision of the layout are:
Desktop (1025px and up) = untouched.
Mobile (tablets 1024px to 768px) = 30px left + right margin.
Mobile (phones 767px and down) = 15px left + right margin.
Kind regards
Hi there,
Apologies for our delayed response.
This design logic was more popular several years ago and was used by many large themes. Now, we agree that it would be better to make the content nearly full width at all times. Please add the snippet below to the theme settings:
@media (max-width: 1025px) {   body .container {     max-width: 100%!important;     width: 100%!important;     padding-left: 30px!important;     padding-right: 30px!important;   } } @media (max-width: 766px) {   body .container {    padding-left: 15px!important;    padding-right: 15px!important;   } }Let us know if that works! 🙂
Best regards,
Shufflehound team
