-
Posts
-
Dear Support Team
On the website https://gerlindemichel.osmosis.de/persoenlichkeitsentwicklung/#leadership-personal there is a Grid Row with two cells, each containing a vertical timeline.
On the cell phone the cells are displayed correctly one below the other.
Only on the tablet portrait format (see screenshot https://osmosis.de/support/gm/person/grid-row2.png) and on the tablet landscape format (see screenshot https://osmosis.de/support/gm/person/grid-row.jpeg) the cells are not yet displayed correctly.Tablet (ipad) portrait format: here the cells should be displayed one below the other as on the cell phone, for this I have inserted the following script in the css (which unfortunately does not work):
@media only screen and (max-width: 989px) {
.responsive #top #wrap_all .flex_column.av-break-at-tablet.cell-break, .responsive #top #wrap_all .av-break-at-tablet .flex_cell.cell-break {
margin: 0;
margin-bottom: 0px;
width: 100%;
display: block;
}
}Where is the error and what can I do so that it is displayed in portrait format on the tablet?
Tablet (ipad) landscape format: the cells should be displayed side by side here. I have already reduced the outer padding with the following script:
/*Grid Row cell -one_half – padding ipad*/
@media only screen and (min-width: 990px) and (max-width: 1440px) {
.responsive #top #wrap_all .flex_cell.av_one_half.gridcell-tablet {
padding: 50px 50px 50px 50px 50px !important; }
}
> Does the script fit or is there actually a simpler solution?
>> Despite this, the timelines are still not displayed correctly and overlap across the cells: https://osmosis.de/support/gm/person/grid-row.jpegWhat can I do so that the timelines are displayed correctly on the ipad landscape format?
(One more thing: To center the timelines within the cells, I have inserted the following script in the css with the help of the support (see post https://kriesi.at/support/topic/2timeline-2-different-views/):
@media only screen and (min-width: 768px) {
#main .avia-timeline-vertical.av-milestone-placement-left .av-milestone-content-wrap {
width: 44%;
} }Best regards, Diana
Translated with DeepL.com (free version)
Supplement:
Tablet portrait format: I was able to solve the splitting and switching of the cells for the iPad in portrait format myself, but there is still a problem with the display: see screenshot: https://osmosis.de/support/gm/person/grid-row3.PNG
How can I ensure that the content box (white speech bubble) fills the entire width of the screen and the text remains positioned in it?
The problem with the view in TABLET landscape format (see previous post) still exists. I would also need your help with this.
Best regards, Diana
Translated with DeepL.com (free version)
Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:@media only screen and (max-width: 1440px){ .responsive #top #wrap_all .flex_column.av-break-at-tablet, .responsive #top #wrap_all .av-break-at-tablet .flex_cell { width: 100%; display: block; } #main .avia-timeline-vertical.av-milestone-placement-left .av-milestone-content-wrap { width: 95%; } }This should make the sections have 100% width up to 1440px and make the text bubble a better width.
Please see the screenshot in the Private Content area of the expected results.Best regards,
Mike
- The topic ‘GRID ROW Tablet View’ is closed to new replies.