Custom CSS for main full resolution higher than 1024px - html

I have an issue currently. I'm using a theme in wordpress and I have repositioned the header logo using custom CSS.
The problem is on the mobile version it hides my header image and moves the logo underneath the mobile menu.
Here is what I have for the current normal viewing size:
.header-middle .col-sm-3 {
position: absolute;
width: 100%;
}
.header-middle .col-sm-9 {
width: 100%;
}
.header-middle .header-logo{
position:absolute;
text-align: justify;
width:300px; /* you can use % */
height: auto;
}
I would like that to not work when the mobile version kicks in for lower resolution sizes so then it views normal again.
xeronohosting.com (temp link) also looks fine on normal display but the header background disappears when custom CSS is applied and viewed on a mobile version. So I'd like to keep the header background and logo in same position once on mobile then the mobile menu to be below those 2 sections as it displays before I applied the custom css
I have tried a couple of solutions and non seem to work so any help would be greatly appreciated.

probably (depending on the actual HTML) this will help:
.header-middle .header-logo{
position:absolute;
text-align: justify;
width: 100%;
max-width:300px;
height: auto;
}
That keeps it at or below its parents width (100%) and limits it to not become wider than 300px.

Related

white space on the right side, only on mobile

I get this vertical white line on the right side of my page.
it's only happening on mobile. found it using device tool bar: https://jood19.sg-host.com/
I designed the website "mobile-first". only used media queries for desktop.
I've tried, without success, the following code
html body{
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
can you recommend something?
It's because your image has a set width which happens to be wider than the mobile screen.
You can keep the set width if you add a max-width to the image. This will mean it will be the same size as you originally had except for when the screen is too small for that and then it will take up the full width.
.about-section img {
width: 28rem;
max-width: 100%;
}
Setting your .about-section img on the dev tools seem to remove the whitespace. Tried with 21 rem on mobile screens.
.about-section img {
width: 21rem;
}

Change Logo settings on Wordpress in a Responsive way

I'm a newbie when it comes to coding (this is my first website) but I'm trying to modify the logo on my website. I would like to make it bigger and central. I am able to achieve this from the desktop view but it doesn't work on the mobile.
Briefly, the logo looks quite small on both devices, desktop and smartphone. So I add this code in Custom CSS (found on the web...):
.logo.logo1 {
width:100%;
text-align:center;
margin-bottom:20px;
}
.logo.logo1 {
width: 400px;
height: 100px;
}
.logo.logo1 {
position: relative;
top: 40px;
right: 130px;
}
With this in place, on my desktop the logo looks nice but on my smartphone it is small and goes too far to the very left of the screen, partially disappearing.
As I'm now approaching to coding, I have no idea whether it depends on a potential logo container or how to make it responsive on the smartphone. Truth is that the more research I do, the more I get confused.
Any help about how to fix this would be very appreciated :)
P.S. the website is this one
Gio
Add this to your css at the bottom.
#media (max-width: 767px){
.logo.logo1{
max-width: 100%;
width: 100%;
position: static;
top: 0;
right: 0;
height: auto;
}
}
Basically, what's going on here is that you are overriding a bunch of styles that your theme applies that make it tiny on small devices.
you should change css in media section for mobile view. use somethings like below :
#media (max-width: 767px){
/*
your css tags
*/
}
special in this issue you should change style-mb.css file in line 3048 and change your logo size
note: you can use mobile view in your browser to test mobile view in your desktop browser in developer tools

Need image to retain specific height in mobile

I have picked up development on a site using Visual Composer in a Wordpress theme (Jupiter). On most pages there is a full width row with an image that maxes out at 1600px wide. The client doesnt like how small the photo shrinks as the browser window/mobile reposnse gets smaller.
http://spiderman.ephronsystems.com/full-width-tester/
I added this CSS in a mediaquery:
div.vc_single_image-wrapper.vc_box_border_grey {overflow:hidden;}
img.vc_single_image-img.attachment-full {height: 200px;width:auto;max-width:none;margin:0 auto;}
This seems to work pretty well but I would rather the image was centered in the browser window. Anyone know how to fix this? I can also replace the VC coding with straight html.
add margin-left: 50%; and transform:translateX(-50%); on the img at the following
#media (max-width: 736px) {
.wpb_single_image img {
height: 200px;
width:auto;
max-width:none;
margin:0 auto;
margin-left: 50%;
transform:translateX(-50%);
}
}
query

Right & Left Img Borders Being Cut Off on Mobile - Force Mobile to Display Images + Borders?

I have a series 8.5" x 11" # 72ppi magazine pages exported from InDesign as jpegs that I wish to display within Blogger posts. I want to display a 1 pixel border around each of these images so the edges of the pages are more easily discerned. I am testing the mobile version of the Blogger site in Chrome's emulator.
The images are correctly be resized to fit the mobile device; however the right and left borders are being cut off. Sometimes the page will load with one border showing, but the opposing border is then 2 pixels off screen. Sometimes when I reload the blog, or change devices, the borders might appear correctly, but then start not appearing once again. How do I make sure the images are correctly resized with the border on each side
.post-body-container img {
border:1px solid #000000;
padding:0px;
width: 612px;
height:100%;
display: block;
}
It's better to not have a fixed width if you want responsiveness to work.
.post-body-container {
max-width: 100%;
}
.post-body-container img {
border:1px solid #000000;
padding:0px;
width: 100%;
height: auto;
display: block;
}
Example (try resizing the page to see the image size changing): https://codepen.io/felipefreitag/pen/EbXxjx
Further reading:
https://www.w3schools.com/css/css_rwd_images.asp
Thanks for the replies. I slightly modified the supplied code by adding a margin. This works for all the devices in the Chrome emulator except for the two Nexus devices, which keep scaling the images so as to cut off the left and rights borders. This could be a problem with the emulator. Another solution which works on all devices is to add a 1 pixel border graphic inside InDesign and export the images with a 1 pixel border.
.post-body-container {
max-width: 100%;
}
.post-body-container img {
border:1px solid #000000;
margin:2px;
width: 100%;
height: auto;
display: block;
}

Making a website logo flexible for different devices while keeping it centered

My last question in terms of CSS was this one:
Website background responsive
it was about a responsive background and i got this one fixed after a long research. I tryed to use some of what i learned and got it nearly working as good as i wanted but(!) i messed something up.
<style type="text/css">
.logo {
display: block;
text-align: center;
margin-top:40px;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
</style>
<img src="https://www.google.com.tw/images/srpr/logo11w.png" class="logo"/>
just to keep it simple i put both together. As you may not see in a fiddle or something like this. It is working somehow fine in lower resolutions but if i screenshot it on my 1920x1080 screen and just check the left to the logo and right to the logo difference in photoshop i can clearly see that the difference from the right border to the logo is larger than from the opposite site.
I realy appreciate some ideas!
A combination of max-width: x% and max-height: x% keeps the image in the correct proportions when resizing (Keep the percentage size the same for both).
Making the image display: table allows the flexible width image to be centered with margin: 0 auto
In this example, the image is 400px x 400px with a max-width / max-height set at 40%. This is just to make the re-size obvious for the demo. Open it full screen and re-size the window to see the shrink.
CSS / HTML / Demo
.logo {
display: table;
margin: 40px auto 0;
max-width: 40%;
max-height: 40%;
}
<img class="logo" src="http://www.placehold.it/400">