Recent
Categories
View Replies (8)

Kinvara J4 Template: sidCol2 next to content - Responive view: does not indent

0
Votes
Undo
  1. eumel7
    eumel7
  2. Sherlock Holmes The Voice Notable Answerer
    Notable Answerer
  3. Commercial Templates
  4. Wednesday, 07 December 2022
  5.  Subscribe via email
In the module position SideCol 2a and 2b I have displayed a small module next to the content. when I choose the mobile view, the sideCol position doesn't move under the content, but stays next to it. I can't find any setting how to do this.
What else is important:
- Template Kinvara installed with sample files
- Template styles "Homepage" and "Default" both tested
- Setting layout option: CSS / SCS /CSS (width 25% each) tried everything
- The original menu entry of your template "Layouts" doesn't work either! (currently displayed on my website)
- It doesn't work for the sidCol1 position either.
- Setting: "Sidecolum Positioning" : Before or after Component, tried everything.
Now I don't know...

Link: My menu item "Home" (Hompage Styles):
http://joomla4.ferienwohnung-deubach.de/index.php/de/
Link My menu item "Holiday apartment" :
http://joomla4.ferienwohnung-deubach.de/index.php/de/unsere-ferienwohnung/das-ist-die-wohnung

Link: Your original menu link: "Layouts":
http://joomla4.ferienwohnung-deubach.de/index.php/de/layout-options/content-sidecol


I have sent the access data to the website. if they are needed (info@joomla51.com)
Attachments (1)
beispiel.jpg beispiel.jpg
References
  1. http://joomla4.ferienwohnung-deubach.de/
Responses (8)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi eumel7

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

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

  #container_main #main {

    flex-direction: column;

  }

}


Does this resolve the issue?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
eumel7
eumel7
Sherlock Holmes The Voice Notable Answerer
Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
First of all thanks for your answer.
The code works very well in phone portrait mode.
It looks a little weird in Phone (L/scape) mode...
(The code was entered in the general settings of the custom css not in the custom css of the responsive options)
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Would only applying a single column to the phone portrait view give you the desired result? If yes then can try replacing your CSS with the following... 

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

  #container_main #main {

    flex-direction: column;

  }

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
eumel7
eumel7
Sherlock Holmes The Voice Notable Answerer
Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks for the info again.
I don't quite understand what that means. Yes I only need one column next to the content. It doesn't work that well with the 440px.
I saw that the calendar had a fixed width in pixels, I changed it to 100% and I can live with it in (L/scape) mode now.
I have now taken the 767 px width in the custom css code
Only the module title is now truncated in (L/scape) mode
see image
Attachments (1)
bildschirmabgriff6.jpg bildschirmabgriff6.jpg
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you for detailing. I now realise your issue.

Probably the easiest solution would be to increase the media query size so the single column would be displayed on landscape module. I am not sure if this would be suitable?

Eg.

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

  #container_main #main {

    flex-direction: column;

  }

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
eumel7
eumel7
Sherlock Holmes The Voice Notable Answerer
Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks.
I now have the code below in the respective template styles:
Added "Responsive Option" -> Phone (L/scape) Custom CSS.
Also set the SideCol-B width (%) to "36" under: "Layout Option". It fits my cell phones there.
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Note that as the above CSS is already wrapped in a media query, you can add this to the Custom CSS field in the Custom CSS tab.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 7
eumel7
eumel7
Sherlock Holmes The Voice Notable Answerer
Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
No, unfortunately not.
There are also differences in the display, depending on the size of the screen. I think I can live with that if I leave it in the responsive options.
I don't know if there will be errors in the future.
  1. more than a month ago
  2. Commercial Templates
  3. # 8
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!