Wordpress - Responsive width with media query

Question

I'm using the Backpack Traveler theme from Mikado, and I'm not happy with the width on my articles when viewed from a mobile device. I have an idea, but I wanted to ask for an opinion here before I do it, since I'm a newbie.

This is the code that the theme currently uses(I'll just add 2 examples):

@media only screen and (max-width:768px) {
    .mkdf-header-vertical .elementor-widget-wrap>.mkdf-row-grid-section.elementor-element,
    .mkdf-header-vertical .mkdf-container-inner,
    .mkdf-header-vertical .mkdf-grid,
    .mkdf-header-vertical .mkdf-row-grid-section {
        width: 600px
    }
}

@media only screen and (max-width:680px) {
    .mkdf-header-vertical .elementor-widget-wrap>.mkdf-row-grid-section.elementor-element,
    .mkdf-header-vertical .mkdf-container-inner,
    .mkdf-header-vertical .mkdf-grid,
    .mkdf-header-vertical .mkdf-row-grid-section {
        width: 420px
    }
}

As you can see most of the pixels are not used when the phone size is max or near max-width parameters. What I think of doing is:

Create more @media query code lines for every 20 pixels (Let's say from 320px to 640px) That's 16 lines of @media query lines with pixel size of 320,340,360 etc.
Set the width to calc(100% - 20px)

It's not the best way to do it for sure, but I don't have any other ideas, so I decided to ask here.

Edit: I have contacted the theme devs and they told me to use this code instead

@media only screen and (max-width: 480px){
 .single-post .elementor-widget-wrap>.mkdf-row-grid-section.elementor-element, 
 .mkdf-container-inner, .mkdf-grid, .mkdf-row-grid-section {
 width: X; 
 } 
}

I'm guessing the .single-post will apply only to the articles themselves so nothing will break when messing with the width size. I've set the width to 95% for a max-width of 480 pixels. I'll do the same for 680px,768px and 1024px.

Edit 2: I tried out the new changes on my Samsung Galaxy S9+ and everything looks great. Some elements are not centered anymore on the home page but I'll figure it out.

No, don't create media queries for every 20px - it is overkill and will be incredibly difficult to manage. You can simply user pecentages - even without the calc e.g. width:94% gives a 3% margin, and margins in proportion to the screen size can be more aesthetically pleasing. However please note that any change to the width of a theme could break the layout if other elements rely on a specific width. — FluffyKitten
can you check with the theme support first? since seems it's a well-managed theme. I believe its something easy to fix. maybe they have a theme setting for wider views like full-width view templates. — Rosh_LK
@Rosh_LK I checked it out and there is no full width template that comes by default with the theme. I have an "Elementor Full Width" but I only have 1 elementor page. — vigoX
@FluffyKitten Is the % still going to work in the media query? For example I set the max-width to 480 pixels and set the width to 94%. If a 380 pixel device visits my website is the width 94% of 380 pixels or 94% of 480 pixels? Thank you for your help! — vigoX
@FluffyKitten I've also contacted the theme devs but because my support expired I did not get a full answer, but it was still an informative one. The difference in their code is that there's no mkdf-header-vertical class. The code starts with ".single-post" class, so I guess that's the correct way of doing what I want to achieve. — vigoX

Danijel Danijel · Accepted Answer · 2020-08-25T22:11:43

You could use vw (viewport width) units and reduce (or maybe even eliminate) the need for these @media breakpoints, e.g. like this:

.mkdf-header-vertical .elementor-widget-wrap>.mkdf-row-grid-section.elementor-element,
.mkdf-header-vertical .mkdf-container-inner,
.mkdf-header-vertical .mkdf-grid,
.mkdf-header-vertical .mkdf-row-grid-section {
    width: 95vw;
}

The vw unit represents the 1% of the width of the viewport (the browser window size), so 95vw would be 95% of the browser window width (or screen width for fullscreen browsers, like ones on phones and tablets), regardless of the device size.

EDIT: Per FluffyKitten's comment, it would be better to use a good old % than vw. If the elements are under the same container or different containers but of the consistent width, then something like the following would be better:

.mkdf-header-vertical .elementor-widget-wrap>.mkdf-row-grid-section.elementor-element,
.mkdf-header-vertical .mkdf-container-inner,
.mkdf-header-vertical .mkdf-grid,
.mkdf-header-vertical .mkdf-row-grid-section {
    width: 95%;
}

Btw. % is way more backward compatible than vw or @media breakpoints.

In this case everything is under .mkdf-header-vertical, so if there is only one container of that class or if containers of that class have consistent widths and if .elementor-widget-wrap is 100% of its parent .mkdf-header-vertical, then these elements will indeed have consistent width.

If you want a consistent number of pixels between between the edge of the container and these elements, then, assuming that the condition in the previous paragraph holds, you can simply do something like

.mkdf-header-vertical { 
    padding-left: 20px;
    padding-right: 20px;
}

and set the above widths to 100%.

Wordpress - Responsive width with media query

1 Answers