So I have a page on wordpress that works with PWA. As a main page I have a background photo with menu, and I want to blockade scrolling in there. On other pages it should work.
I tought that when I will make a good size of background image, it will be fine, but not all of the phones has the sime resolution.
I was wondering if there is a block code for only this main page . Or maybe there is another way to stop scrolling on tablets, and phones.
Peace
I am not getting exactly what your mean to say. What i understand is you want to stop scrolling due to your menu is going outside.
So take a div(class=root-div) as a root element of your menu block and assign a property to it
root-div{
overflow-y: hidden;
}
i might provide you best solution if you share link of your website where you facing issue or more elaborate your issue.
Related
I have a responsiveness issue on a website that I am repairing. And I have no idea what could be going on.
The website in question is this: https://remolquescuni.com/remolque.../power-box-eco/
It has several responsiveness problems, but to play the one I'm talking about, you have to view the website in a small screen size. (For example, 450 x 760)
You will see that there is a carousel of product images, but the horizontal scroll to navigate between them does not work. It moves the top image (which it shouldn't) and doesn't move the bottom ones.
But, if you keep pressing the shift button + the mouse wheel you can move it perfectly.
carousel of product images
That could be happening? Any ideas?
The web is built on WordPress, with Elementor.
I'm improving the general responsiveness, but with this specific problem I don't know what to do.
I have a navigation bar on the mobile version of a website and want it to be always as wide as the screen, i.e. when the user zooms in, the bar is supposed to not zoom in with the rest of the page.
Illustration of the problem:
Without zoom
With zoom
I know this is possible with JavaScript as described in this approach: https://stackoverflow.com/a/14466070/695457
But is there a way without JS? If not, are there any other libraries for this except detect-zoom?
There is no way without JavaScript. I suggest you leave it as it to be honest as those menu items look mighty small on the first screenshot if it was on a phone. You may be introducing an accessibility issue by disabling the functionality to let people with poorer eyesight view the menu text.
I'm designing a chat page for a radio station and i am working on a 1360X768 Res' on a 32Inch screen.
When i ask friends to check the page layout it gets messy for them or elements get smaller in screen and the page wont stay consistent.
If its possible i would like to know if there is a fixed settings i need to insert to "body" in CSS so things like that wont happen, and when i move an element in my screen it will stay like that with other resolutions/screens.
The web page in question
Warning: There is music on Auto play in the page.
Also, if its ok to ask 2 different things but related.
I want to add the scrolling stats on the bottom to the bottom player..right where it says "now playing".
But everything i try wont make it go on top of it..z-index wont help.
Any thoughts?
The first mistake you're making is you're designing on a particular
resolution.
The second mistake you're making is that the resolution
you're designing on is way above the most commonly used 1024x768.
Take a look at MediaQueries. They allow you to build a fluid website that changes drastically at given resolutions.
I'm wondering if anyone knows a way that you can prevent browser zooming of specific page elements.
This is for the mobile version of a site I'm developing. I have a fixed menu bar that runs full width of the site and remains at the top of the page at all times to provide navigation. I've optimised the button/text sizes to work for touch screens and don't really want it to be affected if a user zooms the page content text.
The only thing I've come across is the following CSS, but this doesn't seem to work when I've tried it:
-webkit-text-size-adjust: none;
I'm do not wish to disable resizing of the whole page via the Viewport meta tag, I just want to target the menu bar html elements.
The zoom mechanism varies across browsers and is not standardized, nor is it scriptable. Any solution would be pretty convoluted in order to work across browsers. There is no easy way to do this.
I wrote a modal dialog based on a similar question, you can find it here.
In essence, the logic is about getting the page scale ratio based on window.innerWidth and maximum page width, applying it as a CSS transform to the element and then repositioning it on screen. If there is interest, I will rewrite it into a library that just takes a position: fixed element as an input and does all this magic to it when the user zooms the page.
Hello good people of Stack Overflow, I am having great troubles with designing a website. I have pretty much finished the first page except for a bit of content, but that's not the question. I am using a PHP include to include a menu on top of each page, to keep it uniform. However, when I resize the window, in any browser, the links will begin wrapping. I think it is an issue with my CSS, or it could be a problem caused by my lack of PHP knowledge.
The link to my website is, builtbyhabel.net63.net. The code should be able to be seen on the developer tools for whichever browser you are using.
Sounds like you have your links inside a container without a fixed width.
<div><a><a><a></div> <-- this one will contract with the width of your browser
vs
<div><a><a><a></div> <-- CSS div { width:978px; }