I'm using wordpress and I used CSS to make the width of my 'About' and 'Contact' page more centered and smaller by adding padding. However, when I do this, in the mobile view especially (I think tablet is okay), there is white space on both sides because of it.
The theme that I am using is built like that I think and I could not really find something in that theme that makes the elements appear smaller width and centered on the page so I used padding instead to make it appear the way that I want.
'Contact' page of my site in mobile view
'Portfolio' page of my site in mobile view
Here's a link to my website: http://www.lisaweng.com/contact/
Is there a CSS that makes those pages appear normal or full width when viewing on mobile view even if I add padding, like how the portfolio page views full width on mobile even though it has white space on both sides of the screen when viewed on the desktop version?
P.S. for the CSS for the padding of the 'About' and 'Contact' page elements, I did use percentages rather than pixels. I am not sure why it's not entirely responsive when viewed in mobile view.
Here's what my CSS looks like for the 'About' and 'Contact' page:
.cf7_custom_style_1 {
padding-left: 20%;
padding-right: 20%;
}
and
.aboutme {
padding-left: 14%;
padding-right: 14%;
}
Is there a code to fix this? Or any idea why this is the case? If there is a code for the mobile view fix, is it going to be the same for tablet as well or does the tablet also have a CSS to fix the responsiveness to how it should be?
Using #media queries to add breakpoints in CSS.
You need to utilise media queries within your CSS code to add specific breakpoints.
Adding this to your stylesheet may help:
#media only screen and (max-width: 950px) {
.cf7_custom_style_1 {
padding-left: 10%;
padding-right: 10%;
}
}
#media only screen and (max-width: 600px) {
.cf7_custom_style_1 {
padding-left: 0;
padding-right: 0;
}
}
Using the above code adds break-points at 950px and 600px. Meaning that if the window size = 950px, change this CSS class to these properties.
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.
Trying to develop a webpage with jsps and some css.
Encountered a problem with media queries.
#media screen and (min-width:500px) {
#first_area {
display: none;
}
}
This is the code that I typed on css file that is linked with my index.jsp.
But the section that is wrapped with div tag named id='first_area'
does not change (first area does not disappear) even when screen is smaller than 500px.
I am wondering if this is a problem with my code/ or media queries are only supposed to use with tags that already exists? (ex. div, span)
What I am trying to do is making the index.jsp page responsive.
Please help.
If you want to hide the div if the screen is smaller than 500px you should use max-width instead of min-width.
#media screen and (max-width:500px) {
#first_area {
display: none;
}
}
I have an instagram plugin installed, which i have put in the footer of my blog. on a desktop version, it is perfectly fine, however, on a mobile version, the screen is smaller and all the images align under each other, instead of 6 images next to each other as on desktop.
I would like to know, how can I make them 2 rows with 3 images on a mobile? where the 3 images together of each row take in 100% of the screen from left to right? with css?
I can't give you the full style css of the instagram plugin because it has a built-in css. But I can copy certain css element from the inspect element and put !important behind it. I just don't know how to do that.
you can see it here --> http://oihanevalbuenaredondo.be
EDIT
#media screen and (max-width:720px) {
#sb_instagram .sbi_col6 {
data-cols:3!important;
}
}
this is what i have now, it fixes that i got 3 images on each row, but the images arent square, and my images are cut, not resised
You would need to use a CSS #media query to target mobile, and add the following CSS:
#media (max-width: 640px) {
#sb_instagram.sbi_col_3 #sbi_images .sbi_item,
#sb_instagram.sbi_col_4 #sbi_images .sbi_item,
#sb_instagram.sbi_col_5 #sbi_images .sbi_item,
#sb_instagram.sbi_col_6 #sbi_images .sbi_item {
width: 33.33% !important;
}
#sb_instagram .sbi_photo img {
width: 100% !important;
display: inline-block !important;
}
#sb_instagram .sbi_photo {
height: 33vw !important;
overflow: hidden;
background: none !important;
}
}
Obviously you may or may not need to end up using !important for everything. Adding the above CSS results in the following:
Obviously I've swapped out your personal photos for placeholders, but the rest is your code.
Website: www.tarbooshla.com
When viewed on a mobile device, the search icon is not aligned with the rest of the navbar (the logo and the menu icon). How can I fix this?
I have tried updating all the themes and plugins to no avail.
It seems to be displaying exactly as intended with the current rule set. I'm assuming you want it to populate on the right? I was able to move it substantially with the padding property, however I don't think that's the best scenario for you. The search icon is currently not text at all, but a pseudo element displayed in an ::before scenario, if you want it to show up after when it reaches a certain size, I recommend having a media query that sets it to display:none; and an ::after pseudo element that displays when it gets to your smart phone #media and screen (max-width) size.
It is happening because of the limited space in mobile devices.So what you can do is go inside the header.php and put the search bar inside the main navigation bar along with home,about us, etc so search will appear once the user press menu button.or with the help of css,align the menu to the left so that search button can fit into the right.
This code may help you. Make sure to add this CSS code at a place so that it loads after all other css is loaded ( therefore taking maximum priority )
#media only screen and (max-width: 767px) {
#Top_bar .logo {
text-align: left;
}
#Top_bar .top_bar_left {
float: left;
width: 80% !important;
margin-top: 10px;
background: none !important;
}
.header-classic #Top_bar .top_bar_right {
top: 15px;
float: right;
}
}
I am having issues with my carousel using bootstrap3. The image itself is responsive, but I'm having a hard time figuring out how to make the caption, and button also responsive. Haven't had much luck finding a clear answer. See
http://windstarwd.com/testman/
View the above page, then make your browser narrow and you will see the issues
for the "page header" (above the nav bar) i was able to get the phone number (h2) responsive by adding:
#media (max-width: 767px) {
.my-header > div > h2 {
font-size: smaller;
}
}
But I am having trouble with the social media icons stacking and throwing off the site, and the carousel caption and buttons getting shoved off the top when in mobile. It would be ideal to have the 32x32 social icons show normally, but the 16x16 when < 768px
So I guess I'm having two issues here :(
You could use the same media query for the top buttons, like
#media (max-width: 767px) {
.socialIcons > img {
width: 16px;
height: 16px;
}
}
or use a second second icon bar that will be shown if the screen size is too small, hiding the big icons bar, with the bootstrap attribute .visible-sm and .hidden-sm (bootstrap doc).
For the carousel caption, you can once again use the media queries to set a different width when screen size < 768px, or define a width with percents instead of fixed size.
Hope I helped you.