I am new to this website so there might be similar question.
I have created the website with Joomla using Bootstrap.
http://theeruditepen.com/
I needed to update the website and after I updated, everytime the top logo (the top of the page and image (theEruditePen_Logo1.png) disappear in the mobile environment.
It used to show before, but some update change made the logo disappear and I do not find out how to fix it...I really want to show this logo even the mobile environment on top of menu.
I would really appreciate any tips and help.
Thank you
<img
src="/templates/theeruditepen/images/theEruditePen_Logo1.png"
class="visible-tablet visible-desktop img-responsive"
>
Remove visible-tablet visible-desktop class from the image tag.
The above classes will show the image only on tablets and desktops, and will hide it on mobile devices.
If u want to show the image on all devices, then remove the classes.
Or you can add .visible-phone to make it visible on phones
I run into a similar issue in the past.. the solution for me it was the following:
First I checked the type of module in which my element was placed (custom module, articles module, category module, etc).
After that, I checked the especific module option configuration (image attached as an example) and set the mobile option to on. enter image description here
Hope it helps.
Related
I use the Stripe checkout plugin on my wordpress site in Woocommerce. Despite some problems with alignment, everything works fine when filling the payment fields when the screen width is greater than a certain amount of pixels (I don't know exactly how much, but above 800px it works - See the first image). The problem happens when I try to complete the purchase on a screen through the browser on a mobile device or even on the desktop simulating a mobile screen in DevTools (Second image).
[Image 1 - Checkout on desktop deviceImage 2 - Checkout on mobile device Chrome Navigator](https://i.stack.imgur.com/wWS3F.png)
At first I suspected that the problem was related to the css style sheet. I managed to change the size of the div using the #stripe-card-element selectors. The result was only that the blank field get bigger. When inspecting the element when everything is correct, the iframe is loaded inside the #stripe-card-element div, but after decreasing the screen, the iframe is no longer loaded, leaving the code snippet like this.
<div id="stripe-card-element" class="wc-stripe-elements-field">
<!-- a Stripe Element will be inserted here. -->
</div>
I've tried updating the plugins I use and looking for a conflict with another plugin, but nothing worked
In wordpress sliders are coming properly in desktop mode and not coming in mobile mode.
i wan to show full slider in mobile view also.
For reference please find the images and url
http://3.6.131.50/
please help me to resolve this issue.
Thanks
Somu N
you used image in first slider so that it does not show properly in mobile, you need to set css for this for mobile view.
background-position: left center
The website is https://www.alisamesseroffphotography.com/ and the mobile site margins look awful. We use PhoPhoto in Wordpress, and cannot figure out how to add some margins.
Thanks so much!
What mobile site?
It's literally the same site.
You need to look at ditching or changing the theme.
As the other answer says, look at media queries : using a media query you can change how the page displays depending on the screen size it is viewed on. For instance, you could use this to add padding to the article-content class to force there to be white space around all the content on the page (but not the navigation or header image) which I think would solve your problem.
I think you should probably change the theme, something based on bootstrap would do a lot of the styling on a mobile device for you, and would make the navigation work better.
I have a question about Custom CSS or using a coding block when uploading an image to a page as a logo. I am using squarespace for my website and I need help coding my logo so that it fits on every page. An option is to use Custom CSS or a coding block. I am using the Rally template for Squarespace and my logo has a max capacity unfortunately. What coding do I use to have my logo on each page? My site is www.goodemoments.com. Please help, I would like to officially launch my blog very soon!!
Typically, in Squarespace, the way to put your logo on every page is to use it in the header. That is true for the Rally template as well.
To do this:
Add your logo via edit mode by going to Design > Logo & Title >
Logo Image
Save
The logo will now be used in place of your title ("Goode Moments
| Lifestyle Blog")
Go to the Style Editor: Design > Style Editor
Under "HEADER: BRANDING", adjust the "Logo Width" parameter to
your liking.
Once you've done this, it may then make sense to add some custom CSS via the CSS Editor if some additional minor tweaking is needed.
Yes, so I would like to use Custom CSS, because my logo that I will be using is to small. The width only goes to a certain size and I want it to be larger.
I am a back-end developer and I'd like to create a little website using angular and boostrap.
I would like to create a galerie, and I have been looking around to see how it's done. I found a correct example on the following link : https://blueimp.github.io/Bootstrap-Image-Gallery/
In that case, the images are taken from flickr api, which sends 2 different pictures (small and large). The small one is the thumbnail, and when you click on it, it opens the large one.
My question is the following one : let's say I have all my images of different sizes, and that I would like to have thumbnails of those (same size, but responsive !) to create my gallery, what would be the way to do that? With css only?
Create parent <div> with fix width then add img inside by applying width:100% on image and height:auto. Please try to implement the example you found and if you find any issues post with your code.