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:).
Related
I am trying to see if I can find a way to use CUSTOM CSS or HTML for my website's logo on Squarespace. The maximum pixel count is 320 and my logo is still small. I am trying to find a way around this by coding it. I am new to coding Custom CSS and HTML and would like some help as to how I can center my logo on each and every page at a larger pixel amount . By using an image block possibly and just centering my logo.
I have inspected your page and found your problem.
In .Header-branding-logo the max-width: 320px; made every sizing effort of yours useless since the maximum width is only 320px, which is not big enough according to you.
So, I deleted that and modified the code as follow
.Header-branding-logo {
width: 200%;
position: relative;
left: -50%;
}
So now, the logo's width is twice as much as the container top-center's width. position:relative; left:-50%; is for centering your logo.
Like Michael have mentioned in his comments, you should have provided the code replicating the problem inside your question so people could have a nicer look to invest your problem.
I'm having a few problems with the Adaptation theme for Wordpress. I installed it and optimized my blog design, and it looks amazing on mobile and tablets, but I can't stretch it to fill the whole viewport on larger desktops.
EDIT: The link provided below no longer works, but the original body{width:} was incorrectly set to 90%
Here's my blog, see what I mean? The #secondary sidebar just doesn't go all the way to the right. I've tried floating it, making the #main section go larger, (which I couldn't achieve), playing with media queries, but nothing seems to work.
My objective is to make the whole webpage a little less cluttered. Everything seems to be floated left, and it would't be a problem if it wasn't for that little sidebar :)
Changing
body.secondary-sidebar #page
{
width: 90%;
}
to
body.secondary-sidebar #page
{
width: 100%;
}
should work, you might need to adjust some of the widths etc with that change.
So I am creating a website and I've run across this issue. I have search around the internet and couldn't really find a solution to this problem even though I know sites like facebook.com does it.
I want to be able to restrict the resizing of my site's layout at a certain point. Is there some kind of CSS function which restricts the whole site's minimum width and height?
I just realized that these lines of code work:
div {
min-width:1000 px;
min-height: 1000px;
}
When i make websites, it fits on my screen, but when i open the website on another screen, it doesn't work correctly (The divs overlaps eachother). It's the same when i resize the window. I saw a couple of posts about this, but still, no good answer. I tried making a container to put them all in. But it's still the same.
Any answers, why this is happening?
Container CSS code:
#container
{
width: 960px;
margin-left: auto;
margin-right: auto;
}
I put it into HTML like this:
<div id="container">
Content goes here
</div>
EDIT: Guys, i don't think you understand me. When i'm on another screen resolution, all the divs moves. I think everything moves, if i'm not completely wrong. I would like to know the real way of doing this. What do you do?
http://i49.tinypic.com/8wwo6r.jpg
http://i48.tinypic.com/359ydc9.jpg
FINAL EDIT: I fixed it with the percentage. It seems to work quite well! Thanks for all your answers! I know this will give me a kind of bad reputation, because i didn't make myself clear enough.
You can use percentages instead of pixel.
#container {
width: 80%;
margin-left: auto;
margin-right: auto;
}
You can figure out percentages having screen resolution and the size you want using this forumla:
WidthPercentage = ContainerWidth / ScreenWidth * 100
So for your example if your screen resolution is 1360x768:
WidthPercentage = 960 / 1360 * 100 = 70.5%
This is called responsive design.
You can find some guidelines here and some good articles here.
If you don't want to use percentages, you can go with Responsive Design and Media Queries. Basically, you call different CSS rules based on different browser properties (for example: width). See a nice tutorial about this here (you can also see it in action).
Quote:
The second part of responsive design is CSS3 media queries, which currently enjoy decent support across many modern browsers. If you’re not familiar with CSS3 media queries, they basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles. For our purposes, we’re primarily interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify
You've set your <div> (<div id="container">) to be 960 pixels wide. If you view the page in a browser window that's less than 960 pixels wide, then the <div> won't fit in it.
Your question isn't very clear. You've said "when i open the website on another screen, it doesn't work correctly", but you haven't said how it doesn't work. To get help, you need to describe the following three things with enough detail:
What you've done (e.g. what code you've written, what steps you're taking to run that code)
What results you expect from what you've done
What results you're actually getting
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?