I'm trying to create a survey for a client. Everything good however when I visit the survey on mobile devices (small screen sizes) some of the survey is popping out of the screen which makes it unusable.
I tried to change the size of the survey with width but it doesnt change.
I've read that it might depends on inline, but still no change.
The Website (made with Wordpress):
https://survey.xs-sol.com/
Here's some pictures:
Everythings fine
Here's missing some survey
(this is 1 to 1 copy from mobile, so the cut is the issue)
What is it, that triggers the issue?
Problematic is the selectbox under "What is your working environment?" - the second option "Shop (Food, El..." is quite big, so on small screens where there is not enough space, scrollbar appears.
Add select { width: 100%; } to your styles to solve this issue.
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:).
So I have an issue when the screen is a certain width my background photo disappears. It's weird because at full screen (desktop) it's fine and on mobile it's fine. It's kinda the in-between space like tablets or small desktop screens where the background photo leaves/disappears. (The site was written with "responsiveness" in mind.)
The code is quite extensive so it would probably be easier to visit the page in question and use "inspect" to see the code. Unfortunately, iv tried some solutions but they have not worked which means I have no clue what I am doing wrong! How can I get the photo to NOT disappear regardless of the browser/screen width?
See the page # Zoeaa.com
RECREATE ISSUE BY: Reducing the browser and at a certain point, and the background photo should disappear.
Would really appreciate the help! If there is anything I can do to improve this question, please let me know!
Photo of site working.
Photo of the site not working.
I reviewed your site and I think this is not actually background issue but height issue on the element which you applied this background image.
I found something like that:
#media only screen and (max-width: 1360px){
.px_slider, .px_slider .slides>li {
height: auto !important;
}
}
So when height: auto !important; the element I found height is 0 that's why background image not showing. So just check you media query break-points wheres you wrote same type of CSS.
See here:
And when showing:
juniorgoldreport.com is the website I'm working with. On regular desktop view its fine, when I shrink the window down smaller and smaller it seems to act responsive and it's progress. It is being made in wordpress.
When I view it on my smartphone, (LG G4), there is a huge white space to the right of the website and I cannot figure out why. I've been using inspect element via chrome to trouble shoot, but being on a cell phone I dont have that option so easily.
Does anyone have an idea?
Here's an image of the issue when you search the website on a mobile device:
Along with that too, if you guys easily know in my header my logo and my social media/subscribe button are really difficult to align center so its even on both side and they're aligned vertically.Any hints or ideas on this one? I'm much more concerned with the mobile issue though.
Looks to me like it's
.page { overflow: visible !important; }
in line 3308 that's causing the issue. Not sure what purpose that's serving, so you can take it out, but it might cause other issues.
Remove left: 50px; from .site-main .sidebar-container and the gap should disappear.
I have been teaching myself front end web development for a while now and have taken on several client projects with good success so far. I am currently working on the site www.thrivetech.com and having an issue. There are 3 text columns with images above each on the home page of this site, and I cannot come up with a good way to make them all stay the same height. At different screen widths these 3 columns change height and sometimes don't match. Squarespace objects are natively responsive, and when the screen gets small enough these 3 columns stack on eachother and look fine. I have added a lot of Custom CSS to change background colors, text colors, etc. but can't figure out how to make this work. Even if I remove ALL CSS and just have a plain white page with black text, these columns still do this and don't stay the same height. I have even contacted Squarespace support and they haven't come up with a solution. See image below:
I would include some CSS source, but it's best to navigate to the site at thrivetech.com and inspect the CSS to see what is going on. I have considered doing something like using JS and jQuery to get the height of all 3 of these, determine which is the greatest, then set the height of all 3 to the greatest height, but it seems like there should be an easier, more elegant pure CSS solution?? Thanks for looking!
RESOLVED:
I fixed the issue by using a media query to set the parent element of these 3 columns to display: flex; when the window is at least 640px wide. The reason I need the media query is because they need to display as blocks when the window gets smaller so we can take advantage of Squarespace's native responsive design so the columns will stack on top of eachother on mobile and smaller screens. Here's some simple pseudocode:
#media only screen and (min-width: 640px) {
#parentDiv { display: flex; }
}
I'm using the bootstrap framework and i am trying to make it fluid, so it views "perfect" on every device. However i am currently experiencing a problem which i can't solve. The textfield starts on a new line at some point when you resize it. (Live Demo: http://veiling.jamieknoef.nl, the login textfields) It should stay in line.
Any suggestions?
Try:
.login { min-width: 140px; }
That being said. Once the screen starts to get that narrow you need to look at possiby rearranging your layout as its going to have all sorts of problems on smaller devices - which is where media queries come in.