Adjust The Page Width On Mobile Devices

mmaduabuchifelix · Member · Jun 22, 2019 at 8:39 pm
Copy link

Add topic to favorites
Please is there a way I can adjust the width of pages on my site when viewed. It seems to leave much blank space by the width when viewed especially on mobile device. And I suspect it makes an embedded YouTube video appear smaller than the usual size.

The blog I need help with is: (visible only to logged in users)
masterhacker777 · Member · Jun 23, 2019 at 6:50 pm
Copy link
hi you must use css rule called @media
it will adjust element to the width of device :-).
more about there:
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
mmaduabuchifelix · Member · Jun 23, 2019 at 8:18 pm
Copy link
I just checked, only the background colour changes. The size of the width is not working
mmaduabuchifelix · Member · Jun 23, 2019 at 8:20 pm
Copy link
I just checked, only the background colour changes. The width size is not changing
supernovia · Staff · Jun 24, 2019 at 8:01 pm
Copy link
Hi @isochillbeats, I think @masterhacker777 meant to give you some tips on how to use media queries, but the page didn’t include code for your specific site.

Try this:
```
@media only screen and (max-width: 782px) {
  .main .latest {
    padding: 0 40px 1.4rem 40px;
  }
}
```
I want to note too, for extensive CSS customization, especially on outside themes, you’ll need to work directly with a designer. UpWork.com is a good source. Our support isn’t always able to spot the best types of CSS changes to affect layout and what not, as themes often interfere. So if that doesn’t work, you’ll want to get in touch with a designer. Good luck!
mmaduabuchifelix · Member · Jun 24, 2019 at 8:47 pm
Copy link
It worked but only on the first page. Can you please make it work in all pages at a time?
staff-zinnia · Staff · Jun 24, 2019 at 8:57 pm
Copy link
isochillbeats –

What type of mobile device are you viewing the site on? Can you also provide a screen shot of one of the pages that needs the content area widened?

I’m looking at the site through the Google Chrome mobile emulator and iPhone but I do not see an issue with the content width on the pages that are linked from the menu.

Let us know once you’ve added the screen shot in to the site’s media library and we can take a look at it.
mmaduabuchifelix · Member · Jun 24, 2019 at 9:27 pm
Copy link
I’ve added two screenshots… First one is how it looks when I go to the page through the MENU tab. Then the 2nd is how is looks, when I just come into the website through the url sochillbeats.com

Sorry, my reply before yours was a mistake. I meant that the CSS doesnt work when I come to the page through the MENU tab. (Not that it worked only in the first page).

You can check out. Try going to any of the pages through the MENU tab…
mmaduabuchifelix · Member · Jun 24, 2019 at 9:30 pm
Copy link
And I use Infinix Hot 6 Pro Phone
supernovia · Staff · Jun 24, 2019 at 10:27 pm
Copy link
@isochillbeats, you’ll need to include a link to each page where it’s showing up with wide margins.

I was able to find one, so you can update the CSS to this:
```
@media only screen and (max-width: 782px) {
  .main .latest, .showcase {
    padding: 0 40px 1.4rem 40px;
  }
}
```
mmaduabuchifelix · Member · Jun 24, 2019 at 11:14 pm
Copy link
I dont get it…

Like I said, if you go to the MENU tab and click on any post category, you will see that the CSS isnt effective from there, as when you just login to the site using the url sochillbeats.com

I applied the last CSS you sent, it’s still the same.

No items found.