My Website in NOT OK in Tablet Mode

[macfais]

Guys I am facing new problem with my website. My website appears bad in tablet mode.



Photos shown is at screen width 768px before the side bar collapse to the bottom. My site content compressed into 292px and the widgets (sidebar) occupies a lot of space at aroound 425px width.

I want the side bar to collapse to the bottom of my content at screen width 985px with site content and site bar ratio (60:40) before collapsing.

Help me guys and please do not go technical on me. I am just a newbie. I have zero knowledge. All is based on my self-study.

PS: I am using wordpress pre-defined themes. I am just modifying it through additional CSS option.

 

[Mike001]

Looks like a pretty simple page layout, why are you using Wordpress? Wordpress is designed as a blogging platform.

In order to help you we will need to see the code for your page layout, or at least a link to the site to see exactly what it is doing.

With the simple 2-column display that you have shown above a very simple page designed with the CSS Grid, Flexbox or even using simple floats with media queries would perform what you want it to perform without all the added overhead and bloat of WordPress.

 

[macfais]

macfais

Hello Mike. Yes. I am just learning basic things that is why I selected simple layout.

Here is the link of my website for you to see.
myapprovedmaterials.com

Thank you.

 

[Mike001]

Macfais,

I looked at the site and it is a prime example as to why I tell people to stay away from WordPress.

You have a very simple HTML and CSS layout. The only JavaScript that you would need, based on the site content that I viewed would be for you menu system on the smaller screen resolutions.

The source for the site is way too convoluted. You have large groups of CSS mixed in with the HTML, this violates Best Practices of web design, impacts the speed at which your pages load, will negatively impact your SEO and just makes it very difficult to maintain the site. NO good developer would ever design like this. The WordPress template designers know that there user base does not understand the code so they can mix in whatever they wish to make the template work. Plus they are trying to satisfy a large audience with there template so they add a ton of stuff that many of the users will never use.

The menu system at smaller screen sizes loads from the right edge, which again is not a Best Practice as it is not the normal flow that web users are use to seeing. It also blocks way too much of the content. That menu system should be a drop-down that sizes itself based on the number of selections.

It is a very basic site, but not bad looking, it is just not designed well. Which based on what you have said, is not you but the fault of the template.

Based on the content that I am seeing this type of site, with the content you are displaying could be accomplished with about 120 lines of HTML5 and probably 200 lines of CSS.

Compare that to the 1000's of lines of minified code that is currently being loaded.

You would also need about 15 lines of JavaScript to handle the dynamic menu system.

You really should look at writing your own pages, this is not a very complex site especially with the changes and additions to CSS for page layout.

Let me know if you need some guidance, I have a few hundred FREE videos on my site, that you can view, that cover most if not all the information that you would need to know to build this site. And if you need some help let me know I will help you anyway that I can.

 

[ishan_shah]

Hello,
You should use the media query for responsive designs. You can use the @media only screen and (max-width: 600px) function of the bootstrap. Here, min-width and max-width attributes will define the size of your working device. There will be changed device by device. For tablet devices you can use the min-width as a min size of the tablet. Following is the example code of the responsive design for the tablet.

E.x.
@media only screen and (min-width: 768px) {
.class1{background: green;}
}