My team developed the portfolio website.
But we are facing with strange issue.
We pasted this issue in the theme support, but it is not yet solved.
While loading this page, it is giving sometimes like this:
and sometimes like this(We want like this):
How to get rid of this??
I'm not very familiar with Wordpress but if you have access to the CSS that controls the template them maybe you can use Firebug or Inspect Element to find out if the upper and lower divs have any class specifications, and then set the margins to zero in the CSS file like this:
I'll pretend Firebug revealed div classes upperdiv and lowerdiv like this:
<div class="upperdiv">photos</div>
<div class="lowerdiv">photos</div>
in the CSS you could try:
.upperdiv {
margin-bottom: 0px;
}
.bottomdiv {
margin-top: 0px;
}
Hope this helps.
Related
I am facing some problems with css priority on my mobile device. The problem is that css id selector push-content is not applying to body element. The weird thing is that it is working on my PC browser.
Code not working for mobile device:
/* space between content and navigation */
div #push-content {
padding-top: 60px;
}
<body id="push-content">
It applied to body element after this:
<body style="padding-top: 60px;">
I don't feel like this is the only way. Any other way to fix this?
at first you have spaces in between the id = "push-content"
change it to
id="push-content"
at second
you have div #push-content while you are applying it to a body tag so change that to body #push-content
It looks like you have an incorrect selector in your css.
div #push-content will select the element with id push-content that's a child of a div. So you cannot apply this to your body.
Use instead:
#push-content {
padding-top: 60px;
}
or even better:
.push-content {
padding-top: 60px;
}
using a class here instead of an id will allow you to use it on more than just one element.
your selector is trying to find #push-content inside a div, not a div called #push content. Remove the space between them.
plus - Body is not a div - So you might need body#push-content instead
This is absolutely terrible. I found the problem. My website is powered by wordpress. I was using the wrong link. Basically, I was hosting the website via XAMP on my local PC for testing purposes. I was using the function bloginfo('stylesheet_url'); which gave me nightmares. The stylesheet was not being linked on my mobile phone. It was returning http://localhost:8080/wordpress/ which is the incorrect link for any other device on LAN so I put the IP there and it worked like a charm. I modified it to http://192.168.1.8:8080/wordpress/ 192.168.1.8 is the IP of source/host computer ( you can find it by opening command console on windows and write "ipconfig" )
NOTE: You should use bloginfo('stylesheet_url'); function. I removed it temporarily because I was testing my website on other devices via LAN with help of XAMP.
Thank you everyone for helping. I really appreciate it.
This is a relatively small project that I've been working on however it's driving me insane...
I'm trying to port my original website (which was done completely in Dreamweaver, HTML) to a Visual Studio 2013 ASP.NET project where I can add databases, login's etc. for an assignment I have.
The main problem I have is the fact that my CSS code does not want to do what I tell it to do in terms of the layout.
I've tried completely remaking the website entirely step by step, making sure each aspect works correctly before moving on to the next.
This is what my original website looks like:
http://i.stack.imgur.com/sxfeg.png
(Original HTML + CSS) https://gist.github.com/anonymous/7ed94218f9374d41918e
Now, I used a template a long time back in order to get this design and I've experimented to see which CSS code affects the layout and found that the tag main_container (line 13 of the HTML gist) controls the white background of the website.
So if I remove the tag, this will happen: http://i.stack.imgur.com/BFNLE.png
^ This is important in my problem.
When porting over my website, I copied across all the code correctly and adapted it to ASP. (See Gist: https://gist.github.com/anonymous/9c09befeb8950f4c1416)
However, in doing so, I encountered a problem where the CSS code for the main_container was not being used correctly.
#main_container{
width:977px;
background:url(center_bg_repeat.gif) repeat-y center;
The image was not being repeated on the y axis like on the original website and here's the result: http://i.stack.imgur.com/E4TZU.png
Have I got the syntax wrong? Or what is wrong with my code?
I've placed all the images in the same folder as the CSS file for
convenience.
Is this a problem with Visual Studio 2013 or am I doing something
fundamentally wrong?
Is there perhaps another way to port this same design without
causing so many problems?
I'm not entirely clear on what you want to achieve but if it is the same layout as your original site, then it is better to replicate the html and css exactly first to get it working then look at restructuring or refactoring the code. For example, check that all element sizing is the same so that content displays as you expect.
There are a couple of key differences between your original and new code that could affect the behaviour in the new version of your site. In your original css you don't have a repeat style for center_bg_repeat.gif. Also, it looks like #main_container isn't referenced in your original code.
Repeating a background image won't cause content to repeat across the page. You are already including your content in your new html so you just need to use positioning (e.g. floats vs relative/absolute positioning) to get the tiles to layout in the way you want (see code snippet for an example).
html, body, .container
{
height: 100%;
min-height: 100%;
}
.tile {
float: left;
width: 20%;
height: 30%;
margin: 10px;
padding: 20px;
background-color: #ccc;
}
<div class="container">
<div class="tile">first</div>
<div class="tile">third</div>
<div class="tile">second</div>
<div class="tile">fourth</div>
<div class="tile">last</div>
</div>
In your case, if you want #main_container to scale to fit the content then set its style to min-height: 100%;
First, the website - http://www.channeltraveldeal.co.uk/blog
Now - That's out the way so lets go... Hi, I'm currently tinkering with a friends WP powered business page. Sadly, I'm not all that experienced with web design, I just know more than my friend and so I'm in need of some assistance if anyone is able to help.
I'm trying to make sure it's viewed correctly across as many platforms as possible, the theme that has been used has responsiveness settings built in which has obviously helped with this, but unfortunately the header image isn't playing ball and is too big (on tablet only).
I read that the best way to sort this out would be to add this to the CSS for the header image -
width: 100%;
height: auto;
... This is the confusing part (for me), I used Firebug to locate the HTML and CSS for the image and this is what I found -
HTML - <img width="1010" height="220" alt="Channel Travel Deal" src="http://channeltraveldeal.co.uk/blog/wp-content/uploads/2014/02/ctdlogotrue.jpg" class="preload-me">
CSS (from the right pane when the linked HTML is clicked on) - http://pastebin.com/6hyN7yTr
I assumed that the "preload.me" img class is the one I needed to amend. I googled for a bit and came up with a few different snippets to try but none of them worked. Here are the ones I tried.
.preload.me {
width: 100%;
height: auto;
}
preload.me {
width: 100%;
height: auto;
}
I tried those two variations with [style] added after the class name (with no space) and/or !important after the CSS values.
Nothing worked. Would someone let me know if I'm doing something wrong, or if there is something stopping me from overriding this inline style. Also, if my method is on completely the wrong track, if I can do it some other way.
If class="preload-me"
then you need to use the css as preload-me not preload.me
and it should be:
.preload-me{}
I am using the following html to position anchors under a fixed menu:
<a style="position: relative; top: -150px;" name="services"></a>
This works fine in Firefox but ie, chrome and safari all load the anchors to a slightly different position, obscuring the text 'under' the fixed menu.
Does anyone have any ideas of how I could go about resolving this issue.
wip site is http://mattangel.com.au
Many thanks in advance,
Matt
When I make sites like this, I like to make sure that each "page" has a similar class, but different id. When styling the class, make sure you give the following attributes.
.page {
overflow: hidden;
margin-bottom: 1000px;
}
Adding the margin-bottom will prevent you from seeing the extra pages.
I also noticed that you are using jQuery for the slide to effect, I am not sure why you are using the styling for the a name. Just do the following:
<h1 class="page_title" id="services"><a name="services">Services</a></h1>
And make sure to wrap everything up in the page DIV.
I'm having trouble setting the width of the in this Coda-Slider tab set up. I'd like all the tabs to display in one line rather that wrap to two.
http://www.cidigitalmedia.com/coda-slider-2.0/index.html
You'll see the last tab wraps below.
Looked over the CSS and .js and could not find anything setting the to 552...
But IE Developer Tools toolbar and Firebug show an inline style of 552px...
I just can't find where that is.
Style sheet:
http://www.cidigitalmedia.com/coda-slider-2.0/stylesheets/coda-slider-2.0.css
Would greatly appreciate some help.
Best wishes,
Adninjastrator
You're right. Some of the styles in the slider aren't in the CSS, but are instead in the HTML using style attributes. You'll need to open the index.html page, find the ul, and replace the style="width:572px attribute to style="margin-left: 0px; width: auto;" or something that suits your needs.
For a cleaner perspective, you could create your own CSS class or id.
ul#tabs {
margin-left: 0px;
width: auto;
}
And give ul an id id="tabs"