Reduced artwork slideshow on wide-screen phone orientation

Whenever I switch between portrait and landscape mode on my website, the gallery sizing becomes an issue. It looks good in portrait mode but ends up being too large in landscape mode, especially on my iPhone SE where it doesn't fit properly on the screen. I'm struggling to figure out how to make it smaller. Can anyone provide some guidance or assistance? Url: 

@media screen and (max-width: 736px) {
    #galery-carousel {
        width: 100% !important;
    }
    .carousel.slide {
        width: 100% !important;

    }}

Desktop: 

.galerij-slider {
  width: 60% !important;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
}

The mobile CSS is not recognizing the div for galerij-slider. Any help with this would be greatly appreciated.

htmlcss

Answer №1

Make sure to review the media queries specific to iPhones. Source.

For example:

Here is an example of how it can be done.

iPhone 5 & 5S in portrait & landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { /* STYLES GO HERE */}

iPhone 5 & 5S in landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { /* STYLES GO HERE */}

iPhone 5 & 5S in portrait

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

Remember to place your styles within the appropriate media queries.

For example:

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
          #content {
            float: none;
            width: 100%;
          }
          #navigation {
            float: none;
            width: auto;
          }
        }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Images refusing to display within the div

I am attempting to insert an image onto my website, however, I am encountering issues with the code I have written: div#planet { z-index: -10; width: 450px; height: 549px; position: absolute; background: url("https://example.com/im ...

htmlcss

Assist the floats to "ascend" and occupy the available space

The screenshot showcases boxes that have been styled with "float: left". Is there a way to make these boxes float to the first available space in a column? For example, can we move the Music Nation box to the location indicated by the red arrow in the ima ...

csscss-float

Adjust the language of the submit and reset button text based on a variable

I'm facing a simple question but I'm stuck right now... and I was hoping someone could assist me. My issue is as follows: I need to switch the values of two buttons, reset and submit, from Greek to English and vice versa based on a variable retri ...

javascriptjqueryhtmlsubmitreset

Transform HTML entities to an escaped string in CSS content dynamically

I am aware that special html-entities like   or ö or ð cannot be incorporated within a css block like the following: div.test:before { content:"text with html-entities like ` ` or `ö` or `ð`"; } ...

javascriptcssdomhtml-entitiescss-content

How can we enhance the efficiency of rendering text on the screen?

Imagine having a <p> tag inside a <div> with specific properties: div { height: 100px; width: 100px; overflow: hidden; } My goal is to continuously add words to the <p> tag until an overflow is detected, meaning stop when the f ...

javascripthtmlcss

Enter a number into a text box and increase the value in several text boxes created with jQuery in PHP

I need to dynamically populate textboxes with student information from a database after inputting a value, for example 100, and clicking on the 'Add' button. The challenge is to incrementally assign values to each textbox based on the initial num ...

phpjqueryhtmlajax

What sets XHTML 1.1 apart from other document types?

Visit this page for more information: XHTML 1.1 makes it simple to create various display formats, including printing pages, wireless device and PDA pages, and browser pages for television by creating a new CSS (cascading style sheet) for the specific ...

htmlxhtmldoctypehtml4xhtml-1.1

How to align label and input field horizontally in Bootstrap 4

When designing a form in Bootstrap 4, there are specific requirements that need to be met: 1) The screen needs to be split into two parts. (ID & Age one part, Name & College another part.) To achieve this, I am utilizing class="container", is th ...

htmlangularbootstrap-4

JavaScript and CSS animations out of sync in terms of timing

I've been encountering some issues. I have an array containing 5 lines of text that change with a timer, but it seems that the css timer animation might not be synced properly or my @keyframes slidesdown setup could be incorrect. The delay between te ...

javascriptcss

How can we invert codes in PHP?

I've been examining the source code of a PHP website, but I'm finding that all pages have a similar format with unreadable PHP and HTML codes encapsulated within PHP tags. How can I reverse engineer this to understand how it gets translated into ...

phphtml

Mastering the art of obtaining XPaths through Selenium WebDriver

While working on test automation for a section of Outlook Web App, I focused on checking a designated test mailbox that receives emails from our company. I needed to verify specific texts within an email using Assert, but encountered difficulty in identify ...

javahtmlseleniumselenium-webdriverxpath

Stop input elements from receiving focus when the dialog is displayed on the webpage

I successfully integrated a dialog in my html code. My current goal is to: Within my dialog, there is a form with various form elements. Additionally, there is another form on the main page located underneath the dialog. Currently, when I press the tab ...

javascripthtmlcss

The Bootstrap datepicker functions properly when used in plain HTML, but encounters issues when implemented within the .html()

Using HTML: <input class="m-ctrl-medium date-picker" size="16" type="text" id='lateETD1' name="dateRecv" value=""/> Not working with script: var ETD = $("#ETD"); ETD.html("<input class='m-ctrl-medium date-picker' id='la ...

javascriptjqueryhtmlbootstrap-4

Generate a div dynamically and incorporate a function that triggers on click event dynamically

In my current project, I am faced with a challenge due to laziness. My goal is to automatically generate menu buttons that are linked to different sections of a page using raw JavaScript. The issue arises when the body content of my site is loaded from an ...

javascripthtml

What is the best way to create a list with images in a dropdown menu using HTML?

Thanks so much for your assistance! Below is the code snippet I am currently working on <li><a href="#Language">*LanguageHERE*</a></li> I am hoping to turn this into a dropdown menu that displays flags representing all available ...

javascripthtmlcss

Troubleshoot: Difficulty with accessing nested tag name using getElementsByTagName

I'm currently working with a div that contains a table and its data pulled from a database. <div id="content"> <table> <tbody> <tr> <th class="header" colspan="2">Food items include:</th> </tr> ...

javascriptjqueryhtmlcsssorting

Struggling to designate the active button on an HTML/CSS webpage

As a beginner in the world of HTML and CSS, I'm facing some challenges with making buttons appear active. My goal is to have button1 highlighted by default when it's selected, and upon clicking on button2, the content above should change successf ...

jqueryhtmlcss

Adjusting the opacity of the background image in the section - focus solely on the background

This section is what I'm working on. <section ID="Cover"> <div id="searchEngine">hello</div> </section> I am trying to achieve a fade in/out effect specifically for the background image of the Cover section. T ...

javascriptjqueryhtmlcss

using ng-class or ng-style for displaying error messages when validating a text area content

I'm curious about the most effective "angular" method for changing the character count style for validation purposes. I have a text area with a 250-character limit. Instead of restricting users to exactly 250 characters, we want to allow them to excee ...

javascriptcssangularjs

Incorporating Ajax comments into an Ajax-powered status feature

I'm currently in the final phase of implementing ajax in my feed. Originally, I thought it would be a simple matter of pasting the comment input, but it turned out to be more complex than I anticipated. I placed the input below the main ajaxed status ...

phpjqueryhtmlajax