Can't figure out what is breaking my responsive website - javascript

I recently updated plugins on my website and I can't figure out what broke the responsive design. Seems like it may be the photo but I have tried that. Does anyone have a potential fix? Would be very grateful.
https://markfulton.com/
Yes, I understand the irony of me being a website developer, but sometimes the wisdom of the crowd is very helpful. :)

Adding display: flex; to the section .container class styles fixes the section container content expanding past the width of the screen issue on the tablet-sized screen.
Removing this should solve the grey space above the header on smaller screens:
#media screen and (max-width: 650px)
#wrapper {
/* top: 200px !important;
}

Related

How to make this banner slider to fit the browser height?

I googled for 2 days trying to understand how the auto height fit works, I think I understand in how to make a background fits the browser, but with this banner slider, I don't have a clue.
Could someone please enlighten me on where should I look for/start? Should it be a CSS or JS?
I'm very new to HTML5/CSS3, Wordpress gave me a very easy environment to start a website, but I just barely know how to modify a website other than a plugin.
It would be very cool if the slider section to fit like this one below
Thanks in advance!
This should set the image/album you have on the homepage to be the height and width of the browser, tweak some of the CSS and it should line up with the Sidebar perfectly like you wanted.
img {
max-width: 100%;
height: auto;
width: auto\9;
}
If you are looking for the image that fits the browser height regardless of any display then you can use 'vh' unit from this css units page.
vh means viewport height[viewport = the browser window size.], and 1vh = 1% of the height of viewport, so in your case you can use 100vh for image like this:
img{
height: 100vh;
}
Check this jsfiddle for the same.
Remember that you need high-resolution images and those images will not look good on mobile devices.

How can I make a table in a "code block" on my Squarespace site responsive?

I have a website built on the Squarespace platform. Using a Squarespace "code block" I inserted the HTML for a table on this /test page. The table is not responsive.
I would like the table to display on mobile devices as if it were in an <iframe> with horizontal scrolling. On screen resizing down, on whatever device, I need the columns not to narrow beyond a certain point, say min-width: 150px.
I've searched this site and read many of the nearly 7,000 results on the terms "responsive table" but found nothing that seems to be on point. I've searched CSS Tricks but found nothing, which isn't surprising since I think it can't be done with CSS only. I searched the Squarespace Answers Forum of course but found no help.
I created this Pen on CodePen which behaves like I want. The same HTML in a Squarespace code block does not.
I'm thinking that this will require some JavaScript of which I have no knowledge. So I'm wondering whether anyone here can help.
Thank you for your interest in my question. Any help will of course be much appreciated.
After posting the question I went to Tables Generator, the HTML Tables tab, and found that it had an option, under the Extra Options drop down selector, to make the table responsive. That option generated an #media query which did the trick.
The overarching markup I used is:
<div class="schedule-wrapper">
<table class="schedule">
...
</table>
</div>
The CSS I used is:
#media only screen
and (max-width: 1200px) {
.schedule-wrapper {
-webkit-overflow-scrolling: touch;
overflow-x: auto;
margin: auto 0;
}
.schedule {
width: auto;
}
}
I modified the pen Table Play to reflect this and will leave it up in case anyone wants it for reference.
It seems to have turned out to be doable with CSS only. How cool.

Make an image responsive by height AND width

I am working on a site for a client, using a purchased Wordpress theme (so all the code is not necessarily mine, but I can pull something if needed).
The landing page has a responsive background image. On top of that, I need to use images to show the relevant logos (the fields where I input this were intended for text, but they allow images with no problem). The image has a border wrap around it also, and then people can scroll down from there to see the rest of the content.
My problem: on desktop, the logos will rescale with the WIDTH fine. But one of my clients is viewing in a very widescale-oriented browser window (which I figure is unusual across all users, but it's the client!), and the logos do not rescale with HEIGHT changes, so they get cut off by the border wrap.
I've tried things like
.home-section img {
max-height: 50%;
}
Which is what the theme's developer provided initially, and also changed 50% to 50vh (just trying some things I came across online, not a code expert by any means), and also a variation of this solution HERE
with no luck.
My (again, partial) understanding is that since the height of the div with the background image isn't set explicitly, I can't use a percentage height for the logo/child element, but is there a way to solve this?
I'm currently using srcset to get the logos the right size for mobile, but that's not a perfect solution. I figured there may be a javascript solution too, but I'm only about 75% with HTML & CSS and not much with JS/PHP without explicit directions. (Call it capable, but inexperienced).
You can view the issue HERE.
Thank you!
=================================================
EDIT:
A coworker came across this solution, which improves things greatly. The issue still happens at a short enough browser (IE landscape phone viewing, etc), but works on a greater range of viewport sizes:
div.home-section-image {
min-width: 600px;
max-width: 1080px;
min-height: calc(690px * (90/150));
height: 100vh;
width: 100vh;
}
The logos now scale vertically to a point, though the viewport height can still catch them and cut them off, but at a better threshold (at ~550px high, where it happened at ~720px high previously - now well beyond a normal person's minimum browser size, my understanding is ~760px is average).
I tried to combine this with #kburgie's code suggestions to keep the logos completely above the green border, but my results ended up pushing the logos off the TOP of the page instead, which is worse (for me, on a horizontal Galaxy S3, I can at least get the main square of the top logo to display, which is enough for me at that size).
Thanks to everyone who helped - I think this may be the best solution I can pull for now!
Seems like you should be able to combine width and height media queries to catch that edge case:
#media (min-width: 1200px) and (max-height: 500px) {
.home-section img {
height: 200px;
width: auto;
}
}
I don't have enough rep to comment or I would. I think isherwood's media query is too specific.
Responsive images should already be responsive by height AND width, and the best way to handle that is by working with the image width.
This is a dangerous selector and you should get rid of it:
img {
height: 100%;
width: auto;
}
It will affect ALL images on your site. You should use a class instead. Beyond that, your images are already set to max-width: 100%, which is all you need.
Focus on your positioning instead
Step 1: Remove your margin top and bottom
.home-section .container { margin: 0 auto; }
Step 2: Absolutely position the image container at the bottom of it's parent. Then it will always stay above the green border. Stick it in a media query if you'd only like this positioning above a certain screen size.
.home-section-image {
position: absolute;
bottom: 10px;
}

Resizing images to fit smaller browsers

I've been searching the questions here for weeks and haven't found an answer to this, so here it goes:
I created a fairly large image (800x1000px) to be displayed in the center of my site. I made it so large with large screen resolutions in mind but I've been using the CSS max-width: 100%;
max-height: 100%;
to have it resize proportionally to fit on computers with smaller screen resolutions as well. (keep in mind this is not a "background" image)
However, what I'd really like, is for the image to resize only when keeping it at the current size would create a horizontal scrolling bar in the user's browser. However, if it will only make a vertical scrolling bar, I'd like it to not resize the image, that way it can be as large as possible (the reason being that I feel a horizontal scroll is less professional looking than a vertical scroll as most sites have a vertical scroll anyway).
Is there a way to accomplish this with CSS or will I need Javascript? And if I'll need javascript please spell out the code as I have absolutely no experience with javascript, thanks!
Just remove max-height: 100%, leaving only the max-width: 100%.
Demo
img {
max-width: 100%;
height: auto;
}

Scroll website automatically to the right on iPad (to hide menu on the left)

Our website has a menu of 200px on the left side that is quite useful, but takes too much space on smaller devices like the iPad. So it would be nice to automatically scroll the website 200px horizontally to the right on the iPad.
I tried similar solutions using #media (max-width: ????px) { .. } CSS and hiding/showing the menu and letting it display using a button, but this isn't as elegant. Maybe there is a much simpler solution in jQuery?
To be more clear: I want the menu to be accessible all the time, so if I want to use it, I can simply scroll to the left, but in any other case it doesn't fill my screen.
Thanks a lot for help,
Josh
Moral of the story is you can't move a webpage 200px's over using CSS. You can use a javascript media query solution and do it. But that would be massively pointless since really you are just trying to hide the menu and there would be a period where the menu is shown then the page shifts which would be terrible.
So use CSS media queries and hide the menu.
The following will hide the #menu div if the device width is between 768 and 1024px (iPad size, according to my source)
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
#menu {
display: none;
}
}
I found the following jQuery code which seems to work:
$(document).ready(function() {
window.scrollTo(228,0);
});

Categories