I'm so confused, take this example
I had a page on WordPress that I wanted to turn to kinda landing page.
I hid the
Nav Bar and the header
I used this code
.page-id-58 .image-bg-header,
.page-id-58 .hero-container {
display: none;
}
It worked perfectly
I also selected full width while editing that page on the editor
I had to use the same color to make that page look like a landing page, so I used that code
.page-id-58 #content article {
background-color: #000000 }
.page-id-58 #content {
background-color: #000000 }
Here's the issue...
It is NOT full width, not as I wanted to be, there's still a lot of space in the left and the right side
As you can see here https://i.stack.imgur.com/07AEt.png
What am I missing, please?
Website preview
Your theme is using Bootstrap 3 and so the maximum width is 1170. If you want to change this to 100%, add this to your theme's 'style.css'.
#media (min-width: 1200px) {
.container { width: 100% !important; }
}
Also your image dimension is low - try adding big image and check.
Check the screenshot below for the image dimension change.
If you want to set full width of your image then you should be use this css
Hope this help
Let me know further clarification
.page-id-58 img.alignnone.wp-image-65 {
width: 100%;
height: 100%;
}
Related
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;
}
}
We use a custom template page in wordpress for a narrow width page. My goal is for it to appear as 600px wide + padding of 50px on each side (or so).
This is an example of a page that works on both desktop and mobile:
[edit: removed link]
This is the page with an issue: [edit: removed link] -- it looks correct on desktop, but on mobile isn't scaling down the width. I've tried removing what I thought were likely culprits: the youtube video, reuploading all images w/ 600px width (instead of wordpress resizing), and still having trouble.
Thank you.
Start with this:
Line 6 of main-41ab33da.css
Change "inline-block" to "block", like here
.page-template-template-narrow .narrow-landing-page {
background-color: #fff;
display: block;
padding: 0 25px;
}
Next, add "max-width" to form (see code) and yellow block (inline styles, as you don't have any selector for it)
#lead-capture {
max-width: 100%;
}
Finally do same for youtube iframe you have and you're good
iframe {
max-width: 100%;
}
I'm using wp-supersized to set a full width background that dynamically resizes. http://wordpress.org/extend/plugins/wp-supersized/
Here is what I have implemented: http://www.preview.sharonblance.com/
I have a fixed height header with height of 154px, and I want the top of the image to fill the screen from the bottom of the header, so that the top of the image isn't getting cut off.
I think that the plugin uses the browser full height though and I want to try to change this.
Can anyone suggest how I could do this?
Hopefully it's never too late to answer one of these. My response is inspired by this post, that unfortunately didn't work for me, but let to a solution: https://github.com/buildinternet/supersized/issues/72#issuecomment-6427232
First, you need to add this javascript (I placed it right after the $.supersized call):
$('#supersized li').height($(window).height() - 154);
Then, add some CSS:
#supersized li { top: 154px !important; }
#supersized li img {
width: auto !important;
max-height: 100% !important;
top: 0 !important;
}
Finally, you might want to disable the supersized overlay while debugging:
#supersized_overlay { display: none !important; }
Good luck!
#supersized li for this class add top: 154px; I mean height of the header. hope it will work.
I guess this is already solved but here it is anyway!
find your supersized.css file and edit as follows:
#supersized img {
padding-top:154px;
}
when i click print option background image is not printing..could u please help me out.
here is my css
.OldNote {
background-image: url(/images/icons/arkiv.gif);
background-repeat: repeat;
width: 100%;
height: 100%;
margin: 0px;
}
Usually it is up to the user and their browser settings to print or not print background images. Check your browser settings.
If you don't want to rely on that, don't place the image in the background, place it on your page in an <img>-tag.
You can just add an image tag like this, whereever you want the image to be displayed :
<img src="url" class='printableonly' />
Then in the css, you can do like this :
#media screen {
.printableonly{
display: none;
}
}
#media print{
.printableonly {
display: inline;
}
}
i just add, if you want it to be background, there is no know way to make it repeat like a common backgrond. To put it under the content you may use css as adding it in other element before the content and giving both elements css position: absolute style, together with the *z-index: .. *, where z-index of content will be bigger.
Maybe you may look into full size background solution which is made very similar