I'm working on this website http://sg.nowcommu.myhostpoint.ch/ and what i simply need is to align the content in the middle only on Tablets and Smartphone.
This is how it looks like on iPad for example enter image description here
use a media css statement such as
#media only screen and (max-device-width: 769px){}
and then add the relevant items to it such as
.text-r,.text-l{text-align:center}
You also might have to overwrite your other css statements by adding a few of the following, remember to use !important if the need arises
float: none;
width: 100%;
You are using two classes to align content left and right .text-r and .text-l just change the alignment for these two classes to center for screens less than or equal to 768px:
#media all and (max-width: 768px) {
.text-r,.text-l {
text-align: center;
}
}
Related
Working on this site: https://redheadedroux.com/
Using Sprinkle Pro Theme
The logo image is automatically designed to size down to 150px in height. I added this code to make it larger:
.header-image .site-title > a {
height: 300px;
}
It looks perfect on the desktop view but now when I view the site on a mobile view, I'm left with large padding space between the announcement/hamburger menu and the first widget. I don't want there to be all of that empty space between the logo and everything else.
I've tried adjusting things in the #media areas already within the theme itself, but nothing seems to work. I feel like it's a matter of selecting this height for a different #media area? But I can't seem to get it to work. Any insight?
Thank you
Photo of what it looks like on mobile view:
Checking your site I can't see any problem at all. Everthing works as You have decided.
If you have the rule:
.header-image .site-title > a {
height: 300px;
}
and you are not happy how it looks on mobile, change it with media queries
like this:
#media only screen and (max-width: 600px) {
.header-image .site-title > a {
height: 120px;
}
}
Just use the window width when you desire to use the change of height and be sure the rule is placed at the bottom of you css sheet.
Figured out my issue. I ended up applying this specific code:
#media only screen and (min-width: 600px) {
.header-image .site-title > a {
height: 300px;
}
}
It left the logo sizing alone for any screen size below 600px. But for anything 600px and above, it made the logo height 300px, which is exactly what I wanted. The padding around the logo image on mobile devices is no longer there.
When I set grid using css-grid and use vertical height limit: height: 90vh the content in the (parent div)cards (cards are derived from Quasar framework but any other seems to show similar behvariour) is flowing over on smaller screens. Is there a way to set the content to fill the required height but if the screen is smaller then disable that limit?
Here is codepen that shows this behaviour
https://codepen.io/pokepim/pen/wvaYNXp
So the main thing is that on big screens I would like to keep all the content on the screen (all those cards that you see in the codepen)- no need scroll. However on smaller screens maybe the content should become scrollable.
Use media queries
Exemple
#media handheld or (max-height: 800px) {
.div4{
overflow-y: scroll;
}
}
#media screen and (min-height: 800px) {
.parent .div4 {
height: 550px;
}
}
Please look at this website http://www.grupottc.com/ scroll down until the section that says "VALOR AÑADIDO" when you resize the whindow you'll see that the blank parts from the sides are shrinking with the window, how to make that effect, thak you.
Look at the media queries. A website must implement some media queries to match specific max-width or min-width in order to fit the screen size. You may search for some of these queries in the website such as those below, which are only applied as long as the screen width is not more than 767px.
#media (max-width: 767px)
.elementor-column {
width: 100%;
}
#media (max-width: 767px)
.elementor-96 .elementor-element.elementor-element-8g5lbx9 .elementor-icon-box-icon {
margin-bottom: 16px;
}
I am trying to remove a CSS class in Wordpress for smaller screens. I tried using visibiliy:hidden in the media queries for max-height 480px for that class but it's not working. Please see http://kingsmanarms.us/. There is a spacer placed above the Classes image with a padding of 235px needed for desktop, but the spacer is creating a padding over the Classes image but the same spacer padding is not creating in issue over the Services image for mobile device
Well I suppose you need something like this:
#media (max-width: 480px) {
#panel-8-0-2-0 {
display: none;
}
}
Hey could someone tell me if this part of my css is right or wrong?
I personally think it is wrong but this is the only way I can place content in the center of the screen, if I replace the 999px with auto everything goes to the left.
If anyone knows how to write it properly that would be great!
I have been making website for quite a while now but I need to learn the right way.
#wrapper {
width: 999px;
margin: 0 auto;
}
DEMO
If you want that #wrapper stay in the center of your page your code is correct.
You can specify every width you want, but not auto.
If you are looking for Responsive Design, take a look at the #Media Queries
http://googlewebmastercentral.blogspot.co.uk/2012/04/responsive-design-harnessing-power-of.html
Example:
Write your css for normal style, then add:
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
Here you can specify different size and style for browser with that min or max size.
A good tool for start using Responsive Design is: Bootstrap