I'm building a website with WordPress. The theme I used is enfold.
My problem here is that when I open the website in mobile mode, the cart icon is placed on the logo.
I reviewed all the store-related options, but the problem was not resolved. How can I fix this problem?
It's not easy to help you without the actual code. We need at least the HTML that creates the header of your template. But, this will probably do the trick.
Resize your browser window to a mobile screen size
Right click somewhere on the screen and choose to inspect (if you are with Chrome)
Find the cart icon on HTML code and get his class name
Add the following CSS rule either on your style.css child theme or on your theme options page for custom CSS
.cart-css-class {
float: left;
}
This will move the icon on the very left side of the screen. You can try different CSS rules like float: right or position: absolute.
As I said, it's not easy to give a 100% correct answer without a link to the website or the code of the header.
Related
My image grid on my Wordpress site for some reason does not resize fully to the max-width of the browser when I click an internal link to the homepage (eg. I click on an image then click back on the logo). It goes back to fullscreen when I resize the browser. It also works fine if I go into my website externally (from typing in the url). I have tried using:
#site {
max-width: !important;
}
but doesn't work. I'm not sure if if it is the theme that is the issue or one of my custom css. I have tried isolating some css with the inspector tool and seeing if any of them caused the problem but I couldn't find anything.
Unfortunately I don't have access to the full backend of the theme and I'm not a developer.
So if anyone has any idea that would be great!
Link is http://imconniehuang.com/
Your image gallery's width is calculated and set by Javascript. Have a look at the surrounding div.vc_row, the width is set inline there. So no point in using CSS here. Seems like the script waits for a resize event to recalculate the gallery's width.
The prefix vc_row indicates that you are using Visual Composer. I think the problem is with this plugin. I therefore recommend getting support from the plugin provider-
BTW:
max-width: !important; is not valid syntax. 'max-width' sets the maximum width of an element. You can have a look at the syntax here.
I can't figure out this issue and I have tried looking this up and it is hard to find any one with this scenario. I am using a master page with two content pages. The first content page is default.aspx, of course. The master page has a png that is a banner. This has a rule that makes it responsive in a separate CSS file. This works fine.
For the first content page, I have three buttons that are styled using CSS ( they are custom buttons I made in a vector graphics program that change appearance when they are pressed, all using CSS ) and they are responsive. There is also a listbox that is styled and responsive with CSS.
The layout of the default page is like this: Two div containers: one that floats left and one that floats right. CSS is used to make these containers responsive. In the right div, I have my buttons and they are enclosed in their own divs. So .. and so on. Of course, the listbox is handled the same way with a div that encloses that as well.
Moving on to the second page, I have the same basic structure as the default page. My intention is to have in the right div an image, followed by a text box, then an image, and a text box. The left div will contain the same content that the default page has.
At this point, I have added to the second content page the list box and the CSS is working as expected. The list box looks just like it did on the default page and is responsive as well. So the CSS is working. For the first image, I need a new CSS rule. So I go to my CSS rule and add a new rule .image{ width: 100%; height: auto; } and then I add my image and set it up with the class reference and the image. It does not work. This image is in it's own div. If I change the class of the image to another class that was created previously, the image is responsive. So I can use the banner CSS rule and the image is responsive, I can use the button CSS rules and the image is responsive, it behaves like a button ( clicking on it makes it change its appearance, that kind of thing ), I can even add the rules for the list box and the image is responsive. If I then go back and try to use the rule for image, it doesn't work anymore.
Any ideas on what is going on. It is not making any sense what so ever. I added the rule to the CSS file just like I did with all the other rules but for some reason, this rule is not working at all.
Thank you guys for any help. I can post code if you guys need it, but I don't see how that would help. My image for the second content page is identical to how I did the banner and the rules for the banner and the image are virtually identical, except percentages are different. This is just super weird.
To improve the performance, browsers save the css files in their cache and use their cache. If they don't do that, the browser has to keep loading the css file every time a page is using the css file.
If you clear your browser cache, you will notice that the new style gets applied.
If you are developing commercial software, you probably don't want to tell every user to clear their browser cache and you prefer to force the browser to load the new css file. On the other hand, once the css is loaded you would like the browser to cache it, because it will improve the performance.
There is a trick to achieve that!
Let's say your style file is called mystyle.css and you have a link to the style file in your web site like this:
<link rel="stylesheet" type="text/css" href="~/mystyle.css">
To force the browser to load the file again, you need to change link and the standard practice is to use a parameter in the url (usually a version number).
like this:
<link rel="stylesheet" type="text/css" href="~/mystyle.css?version=1.00">
Your style file is going to ignore that version parameter but the browser will notice a change in the link and will load the new style file. Basically, the browser stores the link to the file and if you change the version number, since the link does not match with what your browser has in its cache, it will force the browser to load the file again.
I have a problem with a theme in drupal. The documentation says it is responsive but when I check it on a mobile, although it resizes everything, it also creates an empty space on the right side of the page. I really don't understand why.
http://nexus.techsaran.com/ This is a link for the demo of the theme when you use the emulator in chrome to see it like if you were on a mobile it creates the empty space and it also does it when you check the link directly from your phone
Thanks
This caused by your adsense div.
Try to generate responsive ads from your adsense account or add this code to your css :
.adsense {
width: 100% !important;
}
I made a wordpress site using the responsive theme "hueman".
For the integration of the content I used the plugin "pixgridder" (don`t know if that is relevant)
For testing the site an all devices I use this tool: quirktools.com/screenfly
My site is: http://www.traumbad-muenchen.de
When testing the site http://traumbad-muenchen.de/portfolio/ in the mentioned tool above I can see that for apple I phone 5 the content is cut off on the left side while the page titel is displayed correctly.
I tried to find out the problem with firebug and so on but can`t find a way to make the content appeare like the page titel does that means not do be cut off.
I tried to play around with different settings redarding padding and margin but whenever I do this the content is mooved to the middle also on the desktop versions so that these versions look stupid.
What I want to achieve is that the edge of the content always starts exactly where the edge of the page titel does. I don`t have any problem displaying the page title.
Would be so thankful if anybody could help me.
Thanks a lot in advance
The problem occurs because there is no padding.
You can overcome this problem by adding a padding-left in your responsive.css on line 171.
Change:
.entry { font-size: 15px; }
to
.entry { font-size: 15px; padding-left:10px;}
In my case, I had to add padding to the span settings. One easy solution would be to load the website on a 'website responsive testing' site and then try to solve your issue by using the 'inspect element' on your browser.
I've added the Nivo Slider to a website and made some CSS modifications. When the site is viewed in IE9 however, there is a large black square covering the left-hand side.
http://genesisoak.com.au/
All of my CSS adjustments so far have been in vain, so I'm turning to you guys for help.
Thanks!
Add to your section class "slide" (.slide) this CSS property (in your stylesheet document)
right: 0;
This property will attach the section to the right of the page and will solve the problem.
That's all you need.