Hi Ismael, thanks for your input.
In the following video, You can see how the relics section and workshop section appear one after the other; this view is on normal mobile devices. However, on high res mobile displays like Pixel 2 , Iphone X etc, you can see how the relics and workshop section appear side by side.
How can I achieve them to appear one below the other even on high-resolution displays?

Also in the video, you must have also seen the titles of relics and workshop section are capitalized (upper case), has there been any updates to the theme and changes to css? Intially they were under normal case.

High-resolution mobile devices – Pixel 2 , iPhone X
Chrome Inspector > Toggle Device Sidebar > Choose IphoneX or Pixel 2

Dear @ismael,
Following code works, howerver it is also messing up my footer
@media only screen and (max-width: 767px) {
.responsive #top.page-id-3650 #wrap_all .flex_column.av_one_fourth {
width: 24%;
margin-left: 1%;
}
}

also what changes need to be made to make it 3 column layout

Hi there,
I think the question that is missed is why is there a vertical scroll when the content (menu items) fit the div.

Hi ,

I have an issue with the menu while viewing on a mobile device, there is a verticle scroll on the menu even when the content fits the page.
Here is the link for reference video – https://vimeo.com/user87007084/review/278692462/c1c57266ff

Hi,
I have set different styling for mobile view in portrait and landscape mode, however for mobiles screens with higher resolution i.e with 18:9 ratio (tested on iPhone X, Google Pixel 2, One Plus 5T) these phones mimic the website as seen on desktop screens when website is viewed in landscape mode whereas they should be taking mobile styling for landscape mode. I am attacking a video herewith https://youtu.be/QAdT2hsS4xA for reference. Kindly let me know how can I make these devices take mobiles styles in landscape mode. For lower resolution mobiles it works on the styling as defined in both portrait and landscape mode.
The page in the video is Home page.

Dear Victoria,
I am reattaching the image here https://imgur.com/a/0YX3V
and
https://imgur.com/a/Vo0Lb

This is on the HOME (landing) page (http://www.indialostandfound.com/)
These issue occur are prominent on small screen settings (like on mobile when viewed in landscape orientation)

also one more issue on the small screens is that wrt to my Home page setup I have 1/2 columns for displaying blog content which displays perfect on the desktop screens however on small screens like mobile there seems to be margin/padding issue. Image attached. How do I add significant distinguishing factor between the two for small screens.

Hey Victoria,
Thanks for prompt support.
I may have one more question if you don’t mind.
–> for smaller screen or mobile viewing, is it possible to show a Text Block (in portrait mode) saying “Rotate to view the site in landscape mode” and when the user rotates his/her small screen device in landscape mode the Text Box hides itself and they see a full-screen image (via full screen slider ). [Prevailing question would be — can we show different contents in portrait and landscape mode on mobiles ? if Yes ? How ? ]