I have deployed the site here. Everything works but if you scale down the page to a mobile-size, you will notice that there is a huge space at the right side of the screen. Not sure what it is? Normally, I don't have to write posts on here because somebody has asked the same question but this time I couldn't find anything.
Hoping someone can help. The HTML doesn't extend to the full page even though its styling says for it to go to 100%. Let me know if you need any other details, really hoping someone can help.
Use below CSS and remove width: 100vw !important; from html tag
img{
max-width: 100%
}
Check screenshot https://prnt.sc/1nya57a
Related
I am using Elementor header and footer kit for my Elementor page, but I don't know why the header and footer are streching more than it should be in mobile screen can't find out what css class making it
https://englanderdavis.com/elementor-37378/#Ebook
EDIT NOTE: I realized this is not for the entire header, when I looked at it on a mobile device, I noticed the image was the cause of my eyesore and addressed it. sorry for this as I realized after re-reading your question, that the issue was the entire header...
it seems that Elementor has a max width that could be too big for the specific image you are trying to work with. Sorry for the long time to answer, there was a lot of code to look through.
/wp-content/uploads/elementor/css/post-34690.css?ver=1628743150
try setting the size to something else like 20% or it is currently set to 29%. you will have to play with it as I cannot reproduce all the files and test that would take me far too long.
This is the part you are looking to change the max-width
.elementor-34690 .elementor-element.elementor-element-9837492 .elementor-image img {
width: 51%;
max-width: 29%;
height: 45px;
}
You could also make the image more to the size you are looking for and remove the
class="elementor-image" from:
<div class="elementor-image">
altogether at line 1177.
However the image will be the same relative size (in this case in both positions by your size references depending on device) for that image on all devices. meaning you would have to resize for the desktop.
Note: although a program like Elementor makes things easier to create, it also convolutes the code with a lot of unnecessary entries and code that seemingly intentionally makes it hard for others to read or troubleshoot. with that being said, I can only get you pretty close.
Unfortunately I cannot put too much more into this due to that and hopefully I got you on the right track:).
I’m working on a website for my business at the moment.
I’m pretty much done, but the header (inside the main but before the content div) image isn’t resizing when on mobile, meaning that the user can scroll horizontally and it totally breaks the responsiveness.
Code at https://GitHub.com/Maestoso-Digital/MaestosoWebsite, and website at https://maestoso.uk.
How can I fix this?
On a less technical side, what are your thoughts on the design? Are there any changes you would recommend making?
I’m fairly new to web design and CSS in general, so sorry if this is really basic or the design looks a bit amateurish - we’ve all got to start somewhere 😊
Thanks in advance.
Since the background is an img and not an actual background-image or even a background, set the display to block and give it a width of 100% so that the image will resize with a width of 100% based on the screen width
#header-img {
display: block;
width: 100%;
}
If you're looking for feedback and suggestions for the site, head over to ux.stackexchange you'll have more luck there
I am building a simple web page, and it seems to keep spilling over the width of the phone no matter what I try. I have tried to add the css attributes max-width:100% and overflow:hidden to every single container in the page, and still the problem remains.
I just feel like I am overlooking some very elementary solution. Could you please help?
Edit: A link to the page is https://www.hyperoffice.com/contact-us/contact-us.php
Please add the following to the main css file of your website.
body{
height: device-height;
width: device-width;
}
Cheers !
I am not an expert in this, but I have managed to build a website or two and have a reasonable grasp of css.
All the other pages on the website respond properly to a browser resize but on this page and only this page; http://theayurvedapractice.com/category/blog/ there is a problem.
It happens when the browser is reduced from full width.
The .site-content usually resizes when the #main.wrapper reduces in size but on this page, it remains bigger and therefore the contents stay bigger than the browser.
Any help would be much appreciated - I'm sure it's something simple (I hope!).
Thanks,
Kate
I think your answer lies in this rule.
#page {
background: white url(images/torn_paper_edge.jpg) top left repeat-x;
min-width: 800px;
}
sets minimum width of 800px to blog pages.
found in child theme style.css
hope this helps.
I just finished a rough draft of a site I've been constructing. Unfortunately, I'm starting to notice how poor the design looks both on smaller resolution screens as well as when the user shrinks his/her current screen size.
The site I'm referring to can be seen here. Furthermore, the functionality I'm looking for can be seen on most any professional site, but I especially noticed it on IBM's site. When the screen is minimized the header content stays intact along with the rest of the site. I was looking for overlow: auto somewhere in their css, but I did not see it anywhere.
What can I change to fix this issue?
PS: I figured it would be easier to link to my site rather than posting code here. However, if you want some code just let me know and I'll embed something in here.
Take care,
Evan
#full-height-template-container {
width: 1300px; <----- in your app here now the width is in %
border: 1px solid #262626;
height: 515px;
margin: 0 auto 20px;
overflow: auto;
}
as you see I used the width in pixels, this way the site stays intact. if this is what you need, then it's ok.. if not, let me know and I'll see what else can be done.
IBM.com isnot doing anything noticeably different than you are.
If you want your design to be accessible and usable on different devices, you might consider responsive design. However, be sure it's worth your time. Your users might not be visiting with, say, an iPhone to make it worth your time.
Visually, what about having your menu span horizontally, instead of vertically? And also centering your image to its parent container?