UI: Angular
I'm using the eLayoutType.application, but on the bigger screen there is always too much spacing on both sides of the page.
please see this pic for example
I guess it has something to do with the checkWindowWidth() of the LayoutService ?
How can I change it to utilize the full window width on the larger screen? (my app is supposed to be used on the larger screen/window only, so this spacing is nothing but wasting space for me.)
I wrote the following code in the styles.scss file under the src folder, it worked for me, I hope it will work for you
#media screen and (min-width: 2500px){
.container, .container-lg, .container-md, .container-sm, .container-xl {
max-width: 2000px;
}
}
You can play with pixels according to your own needs.
Related
In my app, on iphone as well as in the iPhoneX skin on the simulator, the size of StatusBar (inside the Toolbar) is for some reason too small/thin, so the title of the Form is shown partially hidden by the iPhoneX notch.
I've tried to understand how to fix this, but I simply can't figure out how the size of the StatusBar is set. I don't change the size of the StatusBar UIID in my css file, nor in my code and yet it is smaller than if I create a fresh Hello World example with the iPhoneX.skin.
I first thought it could be the SafeArea which changed the size, but it doesn't seem so. Then I thought the default theme (or the values of the Default UIID in the css) could change the size, but it doesn't seem to be that either. I probably miss something obvious, but I'm stuck so any help would be greatly appreciated.
PS. I could of course force the size of the StatusBar in css myself, but then I'm not sure it will work on the various devices, so I prefer rely on the default value defined by CN1.
The StatusBar UIID is defined internally and is generally hard coded to a value that fits for most themes. This very much depends on the padding in your Title UIID which is often large and works in tandem with the status bar. Assuming your title has 0 padding you might need more padding to the StatusBar.
Assuming you're using CSS you can use something like:
#media platform-ios {
StatusBar {
padding: 7mm;
}
}
this is a small project where I am trying to make a responsive web design. everything works until the screen resize and in some sizes some of the element move after the paragraph take more space but are not align with the rest of the element. this is the link in github: https://github.com/jesusjavierm1/Project_2_Responsive_Layout
thank you so much for any help
I just find out that the elements can be align vertically. So I solve the problem like that:
.container {
vertical-align: top;
}
this keep the elements in their place. no matter if I resize the page.
hope this help someone
My current homepage banner scales down to mobile and the image & text shrinks to a size that's unreadable.
How can you make it so that after it scales to a certain point the image stops scaling and it just cuts off the width of the image?
My site: www.riotsociety.com
Example site: sunglass.la
Add this into your CSS files.
This will make your slider 70% of the viewport height. So it will take 70% of any device's height.
this will solve the image problem
.fullwidthbanner-container {
height: 70vh; //please work around this value
}
Now the thing is that the Slider's JS is calculating and giving to each element sizes and styling's.
The buttons content becomes 3px in size on mobiles.
Now I see 2 solutions for this.
Read the documentation of the slider library or plugin if there is any and try to make it not give heights and values for the responsive part of the slider and just do it by your own. You'll need a little bit of CSS.
Or, let it as it is and write on top CSS.
Do you have access to the code? Or it's just a shopify website? I can see that the slider is owl_carrousel
I've really got no clue how to describe the subject in English, so here is more info:
Check my (temporary) website on your phone (no matter what kind one) -> Click
What you'll see is the whole site including the background spread over your screen, instead of focussing on just the container in particular.
My only question is: How do I let the screen focus on the container, instead of the whole site. By other words: Ignore the background and spread the container over your whole screen.
Quick mockup:
What is the best way to achieve it, so it adjusts it to the whole screen of your phone?
Thanks!
Try this:
<meta name="viewport" content="width=device-width">
This will "zoom" your device to a reasonable value. ("reasonable" still depends somewhat on the vendor.)
In your case you can play around with device-width parameter and enter a value which suits you. But better stick with it for the time being.
Starting from this you can create different css styles via media-query and e.g. specify
#media (max-width: 400px)
.my-content-div {
width: 100%;
}
}
to scale your content to 100% on mobile devices.
Making a true responsive design is still a big mess but it can be done. Key is, that you start with something you can at least loosely rely on and then work your way from there.
If you want to make it responsive I think the best solution is by using Media Query instead of adjusting the viewport. Set #container to 100% width and height and set the margin to 0.
I'm building a responsive site using WordPress, and images are automatically set to height:100%; width:auto; and the div resizes according to window size. But this often means some images have their height set to higher than their actual height causing pixelation. What i need is something like height: 100%; width:auto; max-height:"image height here". How, if this is possible, is this possible?
The page where this is an issue is here: http://wheretoimmigrate.com/onthemouse/?portfolio=atomic-clothings-2012-campaign
I resolved it by simply making the images larger by adding a transparent background of larger size and different proportions. Tricked the system into treating it like a larger image. Worked perfectly.